在鸿蒙开发里，布局就是搭页面的 “骨架”，决定了按钮、文字这些东西怎么摆。能帮我们快速实现各种界面效果，其中最基础、最常用的就是以下几类：

目录：

• 垂直布局 ：让元素从上往下排成一竖列，比如列表、聊天消息。

• 水平布局 ：让元素从左往右排成一横行，比如导航栏、按钮组。

•  层叠布局 ：让元素一层盖一层，比如图片上放文字。

• 弹性布局 ：既能横排也能竖排，还能自动换行、适配不同屏幕，是万能布局。

• 相对布局：让一个元素跟着另一个元素，适合做位置要求很严的界面。

• 轮播图：专门用来做左右滑动切换的效果，比如引导页、图片广告。

• 线性布局： 是 Column 和 Row 的统称，是所有布局的基础。

1.Column垂直布局

像手机里的聊天界面，一条条消息从上往下排，比如列表、聊天信息

• Column：组件本身，用来垂直排列
• space：设置子元素之间的间距
• justifyContent：控制垂直方向的对齐方式

• FlexAlign.Start：靠上排
• FlexAlign.Center：居中排
• FlexAlign.End：靠下排

2.Row水平布局

比如让内容靠上、居中、靠下，或者平均分配空间，比如电脑下面的任务栏，都可以这样排列

• Row：组件本身，用来水平排列
• space：子元素之间的间距
• justifyContent：控制水平方向的对齐方式
  • FlexAlign.Start：靠左排
  • FlexAlign.Center：居中排
  • FlexAlign.End：靠右排

3.Stack层叠布局

就是一层一层网上叠加，可以把文字盖在图片上、按钮盖在背景上，就用它

• Stack：用来把东西叠起来的布局盒子
• alignContent：控制里面所有东西的对齐位置
• Alignment.Center：让里面的东西都居中

4.Flex弹性布局

想横就横，想竖就竖，能改个方向就能切换成水平或者垂直排列

• Flex：万能弹性布局盒子
• direction：设置排列方向
• FlexDirection.Row：让元素横着排
• wrap：控制排不下时要不要换行
• FlexWrap.Wrap：排不下就自动换行
• justifyContent：控制元素之间的分布方式
• FlexAlign.SpaceAround：元素两边均匀留空

5.相对布局

表单里 “输入框的提示文字在输入框的上方”，就是用相对布局定位的

• RelativeContainer：相对布局盒子
• id("center")：给元素起个名字当参照物
• position({x: 90, y: 300})：用 x、y 坐标放元素位置
• width：设宽度
• height：设高度
• fontSize：改文字大小
• backgroundColor：给元素上色
• textAlign(TextAlign.Center)：让文字居中

6、轮播图

轮播布局，用来做图片轮播、页面滑动切换

• Swiper：轮播组件，用来做左右滑动切换的页面
• indicator(true)：显示轮播底部的小圆点指示器
• width()：设置轮播 / 页面的宽度
• height()：设置轮播 / 页面的高度
• justifyContent(FlexAlign.Center)：让内容居中显示
• backgroundColor()：设置页面背景色
• fontSize()：设置文字大小
• fontColor()：设置文字颜色

7.线性布局

线性布局，就是按一条线的方式来排列组件，分两种：垂直线性布局、水平线性布局

1. Column：垂直线性布局，让元素从上往下排
2. Row：水平线性布局，让元素从左往右排
3. padding(10)：给元素加内边距，让文字不贴边框，看着更舒服
4. width：设置元素的宽度
5. height：设置元素的高度
6. backgroundColor：给元素设置背景色，方便区分布局范围
7. justifyContent(FlexAlign.Center)：让元素在布局里居中排列
8. space：设置布局里元素之间的间距，比如 Column({space:10}) 就是上下元素间距 10

---