1.垂直布局 Column

• 创建垂直容器 直接写 Column () 包裹内部组件，内部所有组件会从上到下垂直依次排列，对应水平布局 Row。

• 设置组件间距 在 Column 括号内传入 space 数值，格式 Column ({space: 数值})，控制内部元素上下空隙；若设置了主轴均分样式，space 会失效。

• 水平对齐控制（alignItems） 写在 Column 大括号外侧，控制所有子组件左右位置：Start 左对齐、Center 水平居中（默认）、End 右对齐。

• 垂直分布控制（justifyContent） 必须给 Column 设置高度后才生效，控制组件整体上下排布：Start 靠顶部、Center 整体垂直居中、End 靠底部；SpaceBetween 两端贴边中间均分、SpaceAround 元素上下留白均等、SpaceEvenly 全部空隙相等。

• 单个组件单独对齐 在某一个子组件后写 alignSelf，单独修改该组件左右位置，会覆盖容器统一的 alignItems 设置。

 属性：

• 2. 水平布局 Row

  Row是水平排列容器，所有子元素会沿着水平方向从左到右依次排列，适合做顶部导航栏、按钮组、横向表单项目排列。

  属性‌：

• space

  ：设置所有子元素之间的统一水平间距

• justifyContent

  ：控制子元素在‌水平方向‌的对齐方式，取值和Column一致

• alignItems

  ：控制子元素在‌垂直方向‌的对齐方式，常用值：Top（顶部对齐）、Center（居中对齐）、Bottom（底部对齐）

  3. 相对布局 RelativeContainer

  相对布局是自由度极高的布局方式，允许子组件‌基于父容器，或者其他子组件设置对齐规则‌来确定位置，非常适合实现复杂的不规则页面布局，是鸿蒙开发中处理复杂界面的核心布局。

  用法‌：

• 给每个需要定位的子组件设置唯一id

• 通过alignRules配置对齐规则：可以设置left（左边缘对齐）、right（右边缘对齐）、top（上边缘对齐）、bottom（下边缘对齐），规则内容为anchor: '组件id'表示对齐到对应组件的对应边缘

• 4. 层叠布局 Stack

• Stack是层叠容器，子组件会按照代码顺序‌依次堆叠‌，后面写的组件会覆盖在前面的组件上方，非常适合实现「图片上飘文字」、「卡片角标」、「悬浮按钮」这类需要叠加元素的场景。

  属性‌：

• alignContent

  ：设置所有子元素整体的对齐方式

• 支持给子元素单独设置position，做绝对定位

• 5. 弹性布局 Flex

   Flex是流式弹性布局，相比Row/Column更灵活，支持设置换行，自动分配子元素空间，非常适合实现标签流、不规则网格、响应式排列这类场景。

   属性‌：

• direction

  ：设置主轴方向（水平还是垂直排列）

• wrap

  ：设置是否换行，FlexWrap.Wrap代表自动换行，超出主轴宽度自动切到下一行，实现流式布局

• justifyContent

  、alignItems：和Row/Column类似，控制主轴和交叉轴的对齐方式

• 6. 轮播图 Swiper

  Swiper是鸿蒙提供的原生轮播组件，专门用来做首页banner轮播、图片漫游等需要滑动切换的场景，支持自动播放、循环滚动、自定义指示器。

  属性：

• autoPlay

  ：是否自动轮播，布尔值

• loop

  ：是否循环滚动，布尔值

• interval

  ：自动轮播的切换间隔，单位毫秒

• indicator

  ：是否显示指示点，布尔值

• 6. 图片 Image

   Image用来展示本地或网络图片，鸿蒙中读取本地资源一般通过$r('app.media.图片名')的语法引用。

   属性‌：

• objectFit

  ：设置图片的缩放模式，ImageFit.Cover按比例铺满容器、ImageFit.Contain完整显示整个图片

• 7. 视频 Video

  Video是原生视频播放组件，支持播放本地、网络视频，自带控制栏，也可以通过控制器自定义控制播放、暂停、进度跳转。

  属性：

• src

  ：指定视频源，本地视频用$rawfile('视频文件名.mp4')读取资源文件，网络视频直接填url

• controller

  ：创建一个VideoController对象来控制视频播放

• 8. 单选框 Radio

   单选框用于‌多选一‌的场景，同一个分组内的单选框只能选中一个，所有单选框必须设置同一个group分组名。

   每个Radio绑定一个value，通过onChange回调判断是否选中当前选项。

• 9. 选项卡 Tabs + TabContent

   Tabs是底部/顶部选项卡容器，搭配TabContent实现多页面切换，是很多App首页框架的标配。

  属性：

• barPosition

  ：设置标签栏位置，BarPosition.End放在底部，BarPosition.Start放在顶部

• 每个TabContent对应一个选项卡页面，通过tabBar设置选项卡标题和样式

• 10. 按钮 Button

   按钮是最核心的交互组件，用户点击后触发对应的操作，支持设置按钮样式、圆角、背景色。

• 11. 文本/输入框 Text + TextInput

• Text

  ：展示静态文本，支持设置丰富的字体样式、背景、边框、间距

• TextInput

  ：单行文本输入框，是表单收集信息的核心组件，支持设置输入类型（普通/密码）、占位提示

• placeholder

  ：未输入时的占位提示文字

• type

  ：输入类型，InputType.Password代表密码输入，会隐藏内容

• onChange

  ：输入内容变化时触发回调，可以拿到最新输入内容

• 12. 切换组件 Toggle

   Toggle是切换类组件，分为两种类型：ToggleType.Switch滑动开关（用于开/关功能切换）、ToggleType.Checkbox复选框（用于多选场景），支持状态联动，切换状态时可以自动更新UI。

• isOn

  绑定状态变量，表示开关是否打开

• onChange

  回调接收最新的开关状态，更新到状态变量中