目录

1. 前言
2. 一、ArkUI 页面三要素
3. 二、七大布局组件详解 + 代码示例
   •  Column 垂直布局
   •  Row 水平布局
   •  Stack 层叠布局
   •  Flex 弹性布局
   •  RelativeContainer 相对布局
   •  Swiper 轮播布局
   •  Tabs 标签页布局

七大布局组件

1 Column｜垂直布局

功能：子组件自上而下纵向依次排列，标准竖向容器。适用：个人中心、表单、竖向列表

ets

Column(){
  Text("第一行文本").fontSize(24)
  Text("第二行文本").fontSize(24)
}.width("100%")

2 Row｜水平布局

功能：子组件从左向右横向排列，标准横向容器。适用：顶部导航、并排按钮、行内图文

ets

Row(){
  Button("左侧按钮")
  Button("右侧按钮")
}.width("100%")

3 Stack｜层叠布局

功能：子组件同一坐标堆叠，后声明控件层级在上，实现图层覆盖。适用：图片加文字浮层、头像角标、悬浮控件

ets

Stack(){
  Image($r("sys.media.test_bg"))
  Text("悬浮文字").fontColor(Color.White)
}.width(200).height(200)

4 Flex｜弹性布局

功能：可横向 / 纵向切换，通过flexGrow实现控件自适应占比，流式自适应。适用：等分多列卡片、自适应按钮栏

ets

Flex({wrap:FlexWrap.NoWrap}){
  Text("模块1").flexGrow(1)
  Text("模块2").flexGrow(1)
  Text("模块3").flexGrow(1)
}.width("100%")

5 RelativeContainer｜相对布局

功能：依靠id + alignRules锚定其他控件位置，控件互相参照排版。适用：复杂不规则页面、多控件错位排版

ets

RelativeContainer(){
  Text("标题").id("title")
    .alignRules({top:{anchor:"__container__",align:VerticalAlign.Top}})
  Text("黄色区块").backgroundColor(Color.Yellow).width(150).height(150)
    .alignRules({top:{anchor:"title",align:VerticalAlign.Bottom}})
}.width("100%").height(300)

6 Swiper｜轮播布局

功能：手势左右滑动 + 自动轮播切换页面，常用 Banner。适用：首页广告轮播、图片走马灯

ets

Swiper(){
  Image($r("sys.media.img1"))
  Image($r("sys.media.img2"))
}.autoPlay(true).index(0)

7 Tabs｜标签页布局

功能：底部 / 顶部标签栏，点击标签切换对应页面，移动端主流底部导航。适用：APP 首页底栏（首页 / 推荐 / 我的）、分类标签

ets

Tabs(){
  TabContent(){Text("首页内容")}.tabBar("首页")
  TabContent(){Text("推荐内容")}.tabBar("推荐")
  TabContent(){Text("我的内容")}.tabBar("我的")
}

二、布局快速选型总结

表格

业务场景	首选布局
竖向从上到下排版	Column
横向从左到右排版	Row
图片 + 浮层文字叠加	Stack
自适应等分多栏	Flex
控件互相错位参照	RelativeContainer
Banner 自动轮播	Swiper
底部导航多页面切换	Tabs