前言

布局是鸿蒙ArkUI界面开发的基础。不同布局组件有着不同的排列规则，能实现各式各样的页面效果。

构建布局

一、线性布局（Row/Column）

线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row和Column构建。

（一）垂直布局

Column：纵向布局，内部组件从上向下垂直排布；

图1 Column容器内子元素排列示意图

                                       

图2 Row容器内子元素排列示意图

图3 Column容器内排列方向的间距图

Column({ space: 20 }) {
  Text('space: 20').fontSize(15).fontColor(Color.Gray).width('90%')
  Row().width('90%').height(50).backgroundColor(0xF5DEB3)
  Row().width('90%').height(50).backgroundColor(0xD2B48C)
  Row().width('90%').height(50).backgroundColor(0xF5DEB3)
}.width('100%')

（二）水平布局

Row：横向布局，内部组件从左向右水平排布；

图4 Row容器内排列方向的间距图

Row({ space: 35 }) {
  Text('space: 35').fontSize(15).fontColor(Color.Gray)
  Row().width('10%').height(150).backgroundColor(0xF5DEB3)
  Row().width('10%').height(150).backgroundColor(0xD2B48C)
  Row().width('10%').height(150).backgroundColor(0xF5DEB3)
}.width('90%')

二者可以互相嵌套，组合出复杂页面骨架。

二、层叠布局（Stack）

层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。

层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。

图1 层叠布局

Stack组件通过alignContent参数实现位置的相对移动。

图2 Stack容器内元素的对齐方式

三、弹性布局（Flex）

弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。

通过direction参数控制子组件排列方向，支持水平从左到右、垂直从上到下两种基础模式。

核心属性wrap: FlexWrap.Wrap开启自动换行，当一行子组件总宽度超出容器边界时，自动换行至下一行，完美适配手机、平板多尺寸设备。

justifyContent控制主轴上全部组件整体对齐：

• FlexAlign.Start：靠左 / 靠上对齐
• FlexAlign.Center：居中对齐
• FlexAlign.End：靠右 / 靠下对齐

四、相对布局（RelativeContainer）

区别于线性、层叠固定排列规则，相对布局以指定某一个组件为参照物，设置其他组件相对参照物的上下左右距离，适合不规则、自由定位的个性化页面。

• 给容器内每个子组件设置唯一id标识；
• 通过alignRules绑定参照物 ID，设置相对方位与边距；
• 自由摆放按钮、文本、图片，不受行列、层叠限制。

五、选项卡（Tabs）

Tabs 是实现多页面快速切换的容器，由顶部标签栏tabBar和对应页面TabContent组成，点击不同标签，切换下方独立页面。

1. 结构拆分：一个TabContent对应一个页面，顶部标签文字可自定义大小、颜色；
2. 核心参数：barPosition控制标签栏在顶部 / 底部，支持自动铺满、自定义标签样式；
3. 适用场景：校园多模块 APP（学校 / 系部 / 专业 / 班级）、商城分类、资讯多栏目页面。

六、轮播图（Swiper）

Swiper 是 ArkUI 中专门用来实现图片 / 内容自动滑动切换的组件，常放在页面顶部作为宣传海报、图集展示。它支持自动轮播、无限循环、自定义切换速度，搭配 ForEach 批量渲染多张图片。

常用核心属性

1. autoPlay(true)：开启自动播放，不写则需要手动左右滑动切换
2. interval(数值)：自动切换间隔，单位毫秒
3. loop(true)：开启无限循环，滑到最后一张后自动切回第一张
4. index(0)：初始默认展示第 1 张图
5. indicator(true)：底部小圆点指示器，可自定义颜色、尺寸

适用场景

APP 首页宣传图、校园风景轮播、产品图集、活动海报展示。

       本文完整梳理了鸿蒙 ArkUI 常用界面布局与功能组件：线性布局 Row/Column 用于横竖规整排列，Stack 实现图层叠加，Flex 完成自适应流式排版，RelativeContainer 自由定位组件；Tabs 实现多页面分类切换，Swiper 完成自动轮播海报。