垂直布局ColumnColumn是最常用的垂直排列容器所有子元素会沿着垂直方向从上到下依次排列可以通过属性控制对齐方式和元素间距非常适合做页面的根容器、表单列表排列。属性space设置所有子元素之间的统一间距justifyContent控制子元素在垂直方向的对齐方式常用值Start顶部对齐默认、Center居中对齐、End底部对齐、SpaceBetween均匀分布首尾不留空、SpaceAround均匀分布首尾留半空alignItems控制子元素在水平方向的对齐方式常用值Start左对齐、Center居中对齐、End右对齐代码示例EntryComponentstruct VerticalDemo {build() {Column({ space: 10 }) {Text(第一条内容).fontSize(20).width(100%).backgroundColor(#f0f0f0)Text(第二条内容).fontSize(20).width(100%).backgroundColor(#e0e0e0)Text(第三条内容).fontSize(20).width(100%).backgroundColor(#f0f0f0)}.width(100%).padding(15).alignItems(HorizontalAlign.Start)}}垂直布局示例代码运行效果图水平布局RowRow是水平排列容器所有子元素会沿着水平方向从左到右依次排列适合做顶部导航栏、按钮组、横向表单项目排列。属性space设置所有子元素之间的统一水平间距justifyContent控制子元素在水平方向的对齐方式取值和Column一致alignItems控制子元素在垂直方向的对齐方式常用值Top顶部对齐、Center居中对齐、Bottom底部对齐代码示例EntryComponentstruct HorizontalDemo {build() {Row({ space: 12 }) { // 水平排列元素间距12vpButton(首页)Button(分类)Button(我的)}.width(100%).height(50).backgroundColor(#fff).justifyContent(FlexAlign.Center) // 水平居中排列.alignItems(VerticalAlign.Center) // 垂直居中对齐}}水平布局对齐方式示例效果图相对布局RelativeContainer相对布局是自由度极高的布局方式允许子组件基于父容器或者其他子组件设置对齐规则来确定位置非常适合实现复杂的不规则页面布局是鸿蒙开发中处理复杂界面的核心布局。用法给每个需要定位的子组件设置唯一id通过alignRules配置对齐规则可以设置left左边缘对齐、right右边缘对齐、top上边缘对齐、bottom下边缘对齐规则内容为anchor: 组件id表示对齐到对应组件的对应边缘代码示例EntryComponentstruct RelativeDemo {build() {RelativeContainer() {// 床1靠左上角Text(1号床).size({width: 100, height: 100}).backgroundColor(Color.Pink).alignRules({left: {anchor: __container__, align: RelativeAlign.Left},top: {anchor: __container__, align: RelativeAlign.Top}}).id(bed1)// 床2床1的右侧顶部和床1对齐Text(2号床).size({width: 100, height: 100}).backgroundColor(Color.Blue).alignRules({left: {anchor: bed1, align: RelativeAlign.Right},top: {anchor: bed1, align: RelativeAlign.Top}}).id(bed2)}.size({width: 100%, height: 400}).padding(10)}}__container__代表根容器自身代表对齐到父容器相对布局宿舍床位示例运行效果图层叠布局StackStack是层叠容器子组件会按照代码顺序依次堆叠后面写的组件会覆盖在前面的组件上方非常适合实现「图片上飘文字」、「卡片角标」、「悬浮按钮」这类需要叠加元素的场景。属性alignContent设置所有子元素整体的对齐方式支持给子元素单独设置position做绝对定位代码示例EntryComponentstruct StackDemo {build() {Stack({ alignContent: Alignment.BottomEnd }) {// 底层卡片内容Column() {Text(课程卡片).fontSize(18)}.width(90%).height(200).backgroundColor(Color.White).borderRadius(12)// 上层悬浮按钮叠在右下角Button().width(40).height(40).borderRadius(20).margin({ right: 10, bottom: 10 })}.width(100%).height(250).padding(10)}}层叠布局悬浮按钮示例运行效果图5. 弹性布局FlexFlex是流式弹性布局相比Row/Column更灵活支持设置换行自动分配子元素空间非常适合实现标签流、不规则网格、响应式排列这类场景。属性direction设置主轴方向水平还是垂直排列wrap设置是否换行FlexWrap.Wrap代表自动换行超出主轴宽度自动切到下一行实现流式布局justifyContent、alignItems和Row/Column类似控制主轴和交叉轴的对齐方式代码示例EntryComponentstruct FlexDemo {build() {Flex({ wrap: FlexWrap.Wrap, space: { mainAxis: 10, crossAxis: 10 } }) {// 多个标签自动换行Text(鸿蒙开发).padding({ left: 12, right: 12, top: 6, bottom: 6 }).backgroundColor(#e0f0ff).borderRadius(16)Text(ArkTS).padding({ left: 12, right: 12, top: 6, bottom: 6 }).backgroundColor(#e0f0ff).borderRadius(16)Text(布局学习).padding({ left: 12, right: 12, top: 6, bottom: 6 }).backgroundColor(#e0f0ff).borderRadius(16)// 更多标签...}.padding(15)}}弹性布局标签按钮流式排列效果图
