鸿蒙 ArkTS 七大布局组件详解-尧图网络科技

1. Column 垂直线性布局

作用

子组件从上至下垂直排列，页面最常用基础容器。

核心参数

space：子组件间距；justifyContent：垂直分布；alignItems：水平对齐

示例代码

@Entry @Component struct ColumnDemo { build() { Column({ space: 15 }) { Text("标题") .fontSize(20) Text("正文内容") Button("提交") } .width("100%") .padding(20) .justifyContent(FlexAlign.Center) // 垂直居中 .alignItems(HorizontalAlign.Start) // 左对齐 } }

2. Row 水平线性布局

作用

子组件从左至右水平排列，实现一行多元素排版。

核心参数

space：元素间距；主轴 / 交叉轴对齐属性同 Column

示例代码

@Entry @Component struct RowDemo { build() { Row({ space: 10 }) { Text("选项1") .width(80) .height(40) .backgroundColor("#eee") Text("选项2") .width(80) .height(40) .backgroundColor("#eee") Text("选项3") .width(80) .height(40) .backgroundColor("#eee") } .width("100%") .padding(10) } }

3. Stack 层叠布局

作用

子组件叠加堆叠，后写组件覆盖上层；适合背景 + 浮层、角标场景。

核心参数

alignContent：统一对齐；子组件.zIndex()控制层级（数值越大越顶层）

示例代码

@Entry @Component struct StackDemo { build() { Stack({ alignContent: Alignment.Center }) { // 底层背景 Rect() .width(200) .height(120) // 中层文字 Text("主图") .fontSize(22) .fontColor(Color.White) .zIndex(1) // 顶层角标 Text("热") .fontSize(12) .backgroundColor(Color.Red) .fontColor(Color.White) .padding(4) .position({ x: 160, y: 10 }) .zIndex(2) } } }

4. Flex 弹性布局

作用

超灵活自适应布局，支持自动换行、均分剩余空间，复杂流式排版首选。

核心参数

direction：主轴方向；wrap：是否换行；justifyContent主轴分布

示例代码

@Entry @Component struct FlexDemo { build() { Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap, // 自动换行 justifyContent: FlexAlign.SpaceAround }) { ForEach([1,2,3,4,5], (item:number)=>{ Text(`标签${item}`) .width(100) .height(40) .backgroundColor("#f0f0f0") .margin({ bottom:10 }) }) } .width("100%") .padding(10) } }

5. RelativeContainer 相对布局

作用

通过 ID 互相参照定位，适合组件位置互相依赖的复杂页面。

核心 API

id("xxx")给组件标记；.alignRules()设置相对对齐规则

示例代码

@Entry @Component struct RelativeDemo { build() { RelativeContainer() .width(300) .height(300) .backgroundColor("#f5f5f5") { // 基准方块 Rect() .id("base") .width(80) .height(80) .fill("#2196F3") .alignRules({ centerX: { anchor: "__container__", align: HorizontalAlign.Center }}) // 方块在基准下方 Rect() .id("down") .width(60) .height(60) .fill("#4CAF50") .alignRules({ top: { anchor: "base", align: VerticalAlign.Bottom }}) } } }

6. Swiper 轮播布局

作用

横向滑动切换多页面，用于首页 Banner、图片轮播。

核心参数

index默认页；loop循环播放；autoPlay自动轮播；interval切换间隔

示例代码

@Entry @Component struct SwiperDemo { @State curIndex: number = 0 build() { Swiper() { ForEach([1,2,3], (i:number)=>{ Rect() .width("100%") .height(160) .fill(i%2 ? "#FF9800":"#9C27B0") }) } .index(this.curIndex) .loop(true) .autoPlay(true) .interval(3000) .width("100%") .height(160) } }

7. Tabs 标签页布局

作用

顶部 / 底部切换多内容页面，常用于首页分栏、分类导航。

核心参数

barPosition标签栏位置（Start 顶部 / End 底部）；onChange切换监听

示例代码

@Entry @Component struct TabsDemo { build() { Tabs({ barPosition: BarPosition.Start }) { TabContent() { Text("首页内容").fontSize(24) } .tabBar(Text("首页").fontSize(16)) TabContent() { Text("分类内容").fontSize(24) } .tabBar(Text("分类").fontSize(16)) TabContent() { Text("我的页面").fontSize(24) } .tabBar(Text("我的").fontSize(16)) } .width("100%") .height(400) } }