企业官网建设流程全解析

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.ets）：

Row() { 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.ets）：

Stack({ 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.ets）：

RelativeContainer() { 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.ets）：

Row({ 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) // 圆形发送按钮 }

四种容器的选型要点：

布局时通常先"从外到内"确定层级，再按对齐关系选择容器：整体铺底叠信息选 Stack，单行多元素选 Row，纵向堆叠选 Column，需要比例分配用layoutWeight，需要贴边锚定用 RelativeContainer。

六、总结与最佳实践

• 层级先行：先画清"谁在底层、谁在浮层"，Stack 只负责层叠，内部对齐用alignContent。
• 一行多用 Row，一列多用 Column：space参数替代逐个 margin，justifyContent/alignItems控制主轴与交叉轴。
• 贴底吸附用 RelativeContainer：alignRules锚定'__container__'，天然适配高度变化。
• 剩余空间交给 layoutWeight：输入框、正文等"自适应伸缩"元素优先权重分配，避免写死宽度。
• 手势穿透按需设置：浮层若需透传滑动手势，配合hitTestBehavior(HitTestMode.Transparent)使用。