布局体系Flex/Column/Row/Grid/Stack/RelativeContainer 实战界面好不好看、适不适配多端八成取决于布局。ArkUI 提供从线性到相对定位的完整布局体系。本文逐一拆解每种布局的适用场景与代码并给出多端适配与响应式布局的实战方案。一、布局的本质布局解决三件事位置、尺寸、对齐。ArkUI 的布局容器Column/Row/Flex/Grid/Stack/RelativeContainer决定了子组件的排列规则而width/height、padding/margin、对齐属性决定细节。理解谁是主轴、谁是交叉轴是掌握所有布局的关键。二、Column 与 Row线性布局Column纵向、Row横向是最基础的线性布局。均基于 Flex 模型。// Column主轴垂直交叉轴水平 Column({ space: 12 }) { // space 子项间距 Text(上) Text(下) } .justifyContent(FlexAlign.Center) // 主轴对齐居中 .alignItems(HorizontalAlign.Start) // 交叉轴对齐左 .width(100%) .height(100%) .padding(16) // Row主轴水平 Row({ space: 8 }) { Text(左) Text(右) } .justifyContent(FlexAlign.SpaceBetween) // 两端分布 .width(100%)主轴用justifyContent交叉轴用alignItems。这是 Flex 的标准心智模型。三、Flex更灵活的方向控制Flex支持direction、wrap、alignContentFlex({ direction: FlexDirection.Row, // 方向 wrap: FlexWrap.Wrap, // 换行 justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { ForEach(this.tags, (t: string) { Text(t) .padding({ left: 10, right: 10, top: 4, bottom: 4 }) .backgroundColor(#E8F0FE) .borderRadius(12) }) } .width(100%)FlexWrap.Wrap让标签自动换行做标签云必备。四、Stack层叠布局Stack让子组件重叠摆放靠alignContent控制对齐适合图片上叠加文字/角标Stack({ alignContent: Alignment.BottomStart }) { Image($r(app.media.cover)) .width(100%) .height(160) .objectFit(ImageFit.Cover) Text(热门) .fontSize(12) .fontColor(#FFF) .backgroundColor(#FF4D4F) .padding({ left: 8, right: 8, top: 2, bottom: 2 }) .margin({ left: 8, bottom: 8 }) } .width(100%) .borderRadius(12) .clip(true) // 裁剪圆角Stack中子组件按书写顺序叠加后者在上。zIndex()可手动调层级。五、Grid网格布局GridGridItem适合九宫格、相册、卡片墙。可用columnsTemplate定义列宽Grid() { ForEach(this.icons, (it: IconItem) { GridItem() { Column() { Image(it.src).width(40).height(40) Text(it.name).fontSize(12).margin({ top: 4 }) } } }) } .columnsTemplate(1fr 1fr 1fr 1fr) // 4 等列 .rowsGap(12) .columnsGap(12) .width(100%)1fr是剩余空间等比分配单位类似 CSS Grid。GridItem还可通过columnStart/columnEnd跨列做大图占两格的瀑布流。六、RelativeContainer相对定位RelativeContainer让组件以锚点相对定位适合复杂关系布局如仪表盘。RelativeContainer() { Text(标题) .id(title) // 设置锚点 id .alignRules({ top: { anchor: __container__, align: VerticalAlign.Top }, left: { anchor: __container__, align: HorizontalAlign.Start } }) Text(副标题) .id(sub) .alignRules({ top: { anchor: title, align: VerticalAlign.Bottom }, // 相对 title left: { anchor: title, align: HorizontalAlign.Start } }) } .width(100%) .height(200)__container__表示父容器本身。相对布局表达力强但过度使用会难维护简单场景优先用线性布局。七、尺寸单位与自适应ArkUI 支持多种尺寸写法写法含义100/100vp虚拟像素自适应屏幕密度50%父容器百分比1fr弹性分配剩余空间100.lpx物理像素少用vpvirtual pixel是默认单位系统按屏幕 DPI 自动换算保证不同设备视觉一致。推荐用vp或%而非写死 px。八、多端适配一次开发多端部署鸿蒙强调一多同一套代码跑手机、平板、折叠屏。关键手段断点Breakpoints按窗口宽度分 sm/md/lg切换布局。import { Breakpoints } from kit.ArkUI; State currentBreakpoint: string sm; build() { GridRow({ breakpoints: { value: [600vp, 840vp], reference: BreakpointsReference.WindowSize } }) { GridCol({ span: { sm: 12, md: 6, lg: 4 } }) { ProductCard() } } }GridRow/GridCol配合断点窗口变宽时自动从单列变多列天然响应式。媒体查询mediaquery监听屏幕方向/尺寸变化动态切换。import { mediaquery } from kit.ArkUI; let listener mediaquery.matchMediaSync((orientation: landscape)); listener.on(change, (m) { this.isLandscape m.matches; });九、滚动与嵌套滚动内容超长用Scroll包裹Scroll() { Column() { ForEach(this.items, (it) { Text(it).padding(12) }) } } .scrollable(ScrollDirection.Vertical) .scrollBar(BarState.Auto) .width(100%) .height(100%)Scroll与List/Grid都是滚动容器但List/Grid自带虚拟滚动大数据首选Scroll适合少量内容的整体滚动。十、常见布局坑现象原因解决子组件不显示父容器没设宽高给 Column/Row 设width(100%)文本被截断没换行且空间不足加.textOverflow.maxLines百分比失效父级无确定尺寸确保父容器有具体宽高多端错位写死尺寸用vp/%/fr 断点十一、综合实战商品详情页Entry Component struct Detail { build() { Column() { // 顶部轮播图Stack 叠指示器 Stack({ alignContent: Alignment.BottomCenter }) { Image($r(app.media.banner)).width(100%).height(220).objectFit(ImageFit.Cover) Row({ space: 4 }) { ForEach([0,1,2], () { Stack().width(6).height(6).backgroundColor(#FFF).borderRadius(3) }) }.margin({ bottom: 8 }) } // 中部信息Column Column({ space: 8 }) { Text(鸿蒙开发板).fontSize(20).fontWeight(FontWeight.Bold) Text(¥299).fontColor(#FF4D4F).fontSize(18) Text(高性能适合学习分布式能力).fontColor(#666) }.alignItems(HorizontalAlign.Start).padding(16) // 底部操作栏Row 固定底 Row({ space: 12 }) { Button(加入购物车).layoutWeight(1) Button(立即购买).layoutWeight(1).backgroundColor(#FF4D4F) }.padding(12) } .width(100%) .height(100%) } }注意底部操作栏用layoutWeight(1)在 Row 内平分宽度——layoutWeight是 ArkUI 弹性布局的关键属性。十二、总结ArkUI 的布局体系覆盖了从线性到相对定位的全部需求Column/Row/Flex处理一维排列Stack处理层叠Grid处理二维网格RelativeContainer处理锚点关系。掌握justifyContent/alignItems/布局权重三件套配合vp/%/fr单位和断点即可实现既美观又多端自适应的界面。布局没有银弹——简单优先线性复杂再用 Grid/Relative保持可维护性。