鸿蒙ArkTS开发入门：常用布局组件实战总结 近期基于HarmonyOS ArkTS完成多组UI布局练习，从基础线性布局到层叠、相对、轮播、标签页布局逐一实操，本篇整理各类常用布局开发思路与实战要点，适合鸿蒙初学者参考学习。

 一、基础线性布局：Column与Row Column（垂直布局）、Row（水平布局）是ArkUI最基础布局组件，也是页面搭建基石。 1. **Column：纵向排列控件** 控件自上而下排布，通过`space`参数设置内部元素间距，搭配`width/height`、`backgroundColor`控制尺寸与背景色，多用于页面整体竖向排版。 ```arkts Column({ space: 20 }) { Text('space: 20').fontSize(55).fontColor(Color.Gray).width('90%') Row().width('100%').height(80).backgroundColor(0xF5DEB3) } ```

2. **Row：横向排列控件** 元素从左向右排布，同样支持`space`间距配置；配合`justifyContent`可以实现居左、居中、居右三种对齐方式，经典案例就是九宫按钮布局、底部导航栏。 > 实战案例：简易底部菜单栏，使用Row横向摆放首页、课程、消息、我的四个文本，快速实现移动端底部导航。 借助线性布局完成了**个人信息展示页**：通过成员变量存储姓名、专业、年级、学号，Column竖向承载标题与信息文本，利用插值语法`${变量}`渲染数据，区分字体大小与颜色，简洁实现静态信息卡片。

二、层叠布局Stack：元素重叠摆放 Stack布局特点是**子组件按先后顺序层叠覆盖**，后写组件层级靠上，常用于头像角标、悬浮按钮、海报制作。 1. 三层堆叠案例：底层大色块、中层中间色块、顶层按钮，直观体现覆盖逻辑； 2. VIP头像卡片：灰色圆形头像作为底层，右上角叠加红色VIP标签，是APP个人主页通用设计； 3. 悬浮弹窗卡片：课程介绍卡片居中放置，学习按钮脱离文档流定点摆放，实现悬浮按钮效果。

 三、弹性布局Flex：自动换行流式排版 Flex布局核心属性`wrap:FlexWrap.Wrap`开启自动换行，控件横向摆满容器后自动换行，适合功能按钮密集页面。 实战中制作课程分类页面，多门课程按钮等宽设置，开启换行后自动分行排布，无需手动嵌套多层Row，大幅简化多按钮布局代码。 

四、相对布局RelativeContainer：锚定定位控件 区别于固定尺寸、流式布局，相对布局依靠**锚点ID**约束控件位置，子组件通过`alignRules`绑定父容器或其他控件，实现灵活定位。 - 锚定父容器`__container__`：可实现控件贴左上、贴右下、页面居中； - 锚定其他组件ID：一个控件紧跟另一个控件右侧/下方，不受屏幕尺寸变化影响； 案例实现院校名称排版：学院名称置顶靠左，系部名称锚定在学院文本下方，适配不同设备屏幕。

五、轮播Swiper与标签页Tabs

1. Swiper轮播组件 移动端常用banner轮播控件，支持自动播放、循环滚动、指示器显示，核心配置： - `autoPlay(true)`：开启自动轮播 - `interval(800)`：轮播切换间隔毫秒 - `loop(true)`：首尾循环滑动 练习制作景点轮播、舍友信息轮播，每个子项为独立色块文本，快速完成首页广告栏开发。

 2. Tabs标签分页 实现多页面切换，`TabContent`为每一页内容，`tabBar`配置底部导航文字，`barPosition(BarPosition.End)`将导航栏放在页面底部。 经典项目：仿微信底部四标签（舍友、发现、搜索、我的），其中舍友页面内嵌Swiper轮播，嵌套组件完成复合型页面。

六、开发学习心得 1. 页面搭建顺序：优先用Column/Row搭建页面大框架，复杂重叠用Stack，多按钮流式用Flex，精准定位选用RelativeContainer； 2. 组合式开发：实际项目中多个布局嵌套使用，如Tabs内嵌Swiper、Row内嵌Stack头像，是鸿蒙UI主流写法； 3. ArkTS优势：声明式UI语法简洁，链式调用统一配置样式，相比XML布局代码可读性更高。 后续会继续学习状态装饰器@State、事件绑定，从静态页面进阶到可交互鸿蒙应用开发。

文章仅供参考，如有雷同纯属意外