13 — 容器组件布局模型对比一、引言布局是 UI 开发的骨架。ArkUI 提供了 Row/Column、Stack、Flex、RelativeContainer、Grid 等多种容器组件每种容器对应一种布局模型选错模型会导致代码绕路、适配困难。短视频页面往往需要多层级叠放视频画面上叠信息区、多端对齐评论行左右分布、锚点定位输入框贴底本文结合multi-short-video项目的真实布局逐一对比四种核心容器。二、线性布局 Row/Column主轴与交叉轴Row/Column 是最常用的线性容器子组件沿水平Row或垂直Column主轴排列。主轴用justifyContent控制分布交叉轴用alignItems控制对齐。评论区每条评论的头部信息行features/multishortvideocomment/src/main/ets/view/Comment.etsRow() { Row({ space: 12 }) { MSVTextIcon({ src: item.item.pic, iconSize: 32 }) // 头像 Row({ space: 4 }) { Text(item.item.name)... } // 昵称作者标识 } Row({ space: 4 }) { Text(item.item.likes)...; MSVTextIcon(...) } // 点赞 } .width(CommonConstants.FULL_PERCENT) .justifyContent(FlexAlign.SpaceBetween) // 主轴两端对齐头像组在左、点赞在右 .alignItems(VerticalAlign.Center) // 交叉轴垂直方向居中对齐Row({ space: 12 })中的space参数自动为子组件添加主轴间距比逐个加 margin 更简洁。Column 的典型应用是视频页右侧操作区AdaptiveVideo.ets点赞/评论/分享按垂直方向排列Column({ space: 16 }) { MSVTextIcon({ src: $r(app.media.ic_heart_fill), iconOnly: false, content: 1557, ... }) MSVTextIcon({ src: $r(app.media.ic_message_fill), iconOnly: false, content: 566, ... }) if (this.windowInfo.widthBp ! WidthBreakpoint.WIDTH_XS) { MSVTextIcon({ src: $r(app.media.ic_share), iconOnly: false, content: 148, ... }) } }三、层叠布局 Stack视频页面的层级堆叠Stack 允许子组件在 Z 轴方向层叠先声明的在下层。短视频页面的核心结构是视频播放器铺底、信息浮层叠上features/multishortvideoadaptivevideo/src/main/ets/view/AdaptiveVideo.etsStack({ alignContent: Alignment.BottomStart }) { AdaptiveAVPlayer({ // 底层播放器 currentIndex: this.curIndex, index: item.index, currentSource: item.item.currentSource, seekToTime: this.seekToTime, onStateNotify: (state: media.AVPlayerState) { this.currentState state; } }) Column({ space: 16 }) { // 上层作者信息、操作区、进度条 Row() { ...作者信息与操作按钮... } if (this.windowInfo.widthBp ! WidthBreakpoint.WIDTH_XS) { Column() { ...原声音乐与 Progress 进度条... } } } .width(CommonConstants.FULL_PERCENT) .padding({ left: 16, right: 16 }) }alignContent: Alignment.BottomStart让信息浮层默认对齐容器左下角。Stack 还有两个高频能力一是通过alignContent决定子组件对齐方式二是结合.hitTestBehavior(HitTestMode.Transparent)让浮层不拦截底层手势——视频页的信息浮层就设置了HitTestMode.Transparent保证滑动手势穿透浮层作用于 Swiper 翻页。作品封面Works.ets也是 Stack 的经典用法封面图铺底左下角叠点赞数。四、相对布局 RelativeContainer锚点定位RelativeContainer 通过alignRules让子组件相对父容器或其他兄弟组件定位适合贴边、贴底、贴对齐的场景。评论输入框需要永远吸附在评论区底部Comment.etsRelativeContainer() { List() { ...评论列表... } Row() { ...TextInput 与发送按钮... } .alignRules({ bottom: { anchor: __container__, align: VerticalAlign.Bottom }, left: { anchor: __container__, align: HorizontalAlign.Start } }) .border({ width: { top: 1 }, color: #0C000000 }) .backgroundBlurStyle(this.windowInfo.widthBp WidthBreakpoint.WIDTH_MD ? BlurStyle.BACKGROUND_THIN : BlurStyle.NONE, { scale: 0.5 }) }__container__是父容器锚点输入框锚定底部与左侧后无论评论区高度如何变化半模态弹窗可上下拖动输入框始终贴底列表区域随之自动上缩。相比外层再包一个 Column layoutWeight的写法RelativeContainer 让列表占满、输入框贴底的约束关系一目了然。五、Flex 弹性布局与选型对比Flex 是弹性布局容器通过flexDirection切换主轴方向、justifyContent分布、alignItems对齐且支持子组件layoutWeight权重分配。项目中最常见的权重用法是输入框撑满剩余宽度Comment.etsRow({ space: 16 }) { TextInput({ text: this.commentInput, placeholder: $r(app.string.leave_comment) }) .layoutWeight(1) // 占据剩余全部宽度 .height(deviceInfo.deviceType tv ? 54 : 40) Row() { MSVTextIcon({ src: $r(app.media.ic_send), iconSize: 24 }) } .width(deviceInfo.deviceType tv ? 54 : 40) .aspectRatio(1) .borderRadius(CommonConstants.HALF_PERCENT) // 圆形发送按钮 }四种容器的选型要点容器布局模型适用场景项目实例Row/Column线性主轴交叉轴排列规整的组件组评论头信息行、右侧操作区Stack层叠Z 轴铺底浮层、角标视频页信息浮层、作品封面RelativeContainer锚点定位贴边/贴底/多端对齐评论输入框吸附底部Flex弹性权重剩余空间分配、动态伸缩输入框撑满、侧栏导航布局时通常先从外到内确定层级再按对齐关系选择容器整体铺底叠信息选 Stack单行多元素选 Row纵向堆叠选 Column需要比例分配用layoutWeight需要贴边锚定用 RelativeContainer。六、总结与最佳实践层级先行先画清谁在底层、谁在浮层Stack 只负责层叠内部对齐用alignContent。一行多用 Row一列多用 Columnspace参数替代逐个 marginjustifyContent/alignItems控制主轴与交叉轴。贴底吸附用 RelativeContaineralignRules锚定__container__天然适配高度变化。剩余空间交给 layoutWeight输入框、正文等自适应伸缩元素优先权重分配避免写死宽度。手势穿透按需设置浮层若需透传滑动手势配合hitTestBehavior(HitTestMode.Transparent)使用。