1、鸿蒙布局基础：认识ArkUI声明式UI框架、理解布局的核心概念（容器与组件）、掌握线性布局（Row/Column）的基本用法
大家好，我是你们的老朋友。今天咱们正式开始《鸿蒙多设备自适应布局设计实战》的第一课。说实话，每次带新人入门鸿蒙开发，我都是从这一章讲起。为什么？因为布局是UI的骨架，骨架搭歪了，后面再怎么装修都别扭。
嗯，咱们不整那些虚的，直接进入正题。
1.1 认识ArkUI：声明式UI框架到底是个啥？
先说说ArkUI。它是鸿蒙系统自带的UI开发框架，核心思想是「声明式」。说白了，就是你告诉框架「我想要什么」，而不是「你该怎么画」。举个例子：
传统命令式编程，你得一步步告诉计算机：先画一个红色矩形，再在它上面画一行文字，文字居中……累不累？
而声明式编程，你只需要说：这是一个红色的卡片，里面有一行居中的标题。框架自己会搞定渲染细节。
我个人习惯：把声明式UI想象成「点菜」。你告诉服务员「我要一份宫保鸡丁」，至于厨房怎么切鸡丁、怎么调酱汁，你不用管。ArkUI就是那个靠谱的厨师。
ArkUI用TypeScript作为开发语言，代码结构非常清晰。一个典型的组件长这样：
@Entry
@Component
struct MyComponent {
build() {
Column() {
Text('Hello HarmonyOS')
.fontSize(20)
.fontColor(Color.Blue)
}
.width('100%')
.height('100%')
}
}看到没？@Component标记这是一个组件，build()方法里描述UI长什么样。代码即UI，UI即代码。
小提示：刚开始接触声明式语法时，你可能会觉得「怎么这么多点号链式调用？」别急，写多了你会发现，这种写法其实比XML布局文件更直观——你一眼就能看到每个属性是怎么设置的。
1.2 布局的核心概念：容器与组件
搞清楚了ArkUI是什么，咱们聊聊布局的两个基本概念：容器和组件。
组件，就是UI的最小单元。按钮、文本、图片、输入框……这些都是组件。它们负责展示内容或接收交互。
容器，就是用来装组件的「盒子」。容器本身不展示具体内容，它负责决定里面的组件怎么排列、怎么对齐、怎么缩放。
你想想看，这就像搬家。组件是家具——沙发、电视、茶几。容器是房间——客厅、卧室、厨房。房间决定了家具怎么摆放。
在ArkUI中，常见的容器有：
- Row：水平排列子组件（横着排）
- Column：垂直排列子组件（竖着排）
- Flex：弹性布局，更灵活的排列方式
- Stack：层叠布局，子组件可以重叠
- Grid：网格布局，像表格一样排列
咱们这节课先重点讲Row和Column，因为它们是基础中的基础。我在项目中遇到过不少新手，一上来就用Stack或者Grid，结果布局乱成一锅粥。其实大部分场景，Row和Column就够用了。
1.3 线性布局：Row和Column的基本用法
Row和Column，合称线性布局。它们的特点就是「一条线排到底」。
- Row：子组件从左到右水平排列
- Column：子组件从上到下垂直排列
咱们先看一个最简单的例子：
@Entry
@Component
struct LinearLayoutDemo {
build() {
Column({ space: 10 }) {
Text('第一个文本')
.fontSize(16)
Text('第二个文本')
.fontSize(16)
Text('第三个文本')
.fontSize(16)
}
.width('100%')
.padding(20)
.backgroundColor('#F5F5F5')
}
}这段代码创建了一个垂直布局，三个文本从上到下排列，间距10像素。效果就像叠罗汉。
那Row呢？把Column换成Row，子组件就变成横着排了：
Row({ space: 10 }) {
Button('按钮1')
Button('按钮2')
Button('按钮3')
}
.width('100%')
.height(50)
.padding(10)三个按钮从左到右排成一排，中间间隔10像素。
注意：Row和Column默认不会自动换行。如果子组件太多，超出容器宽度/高度，超出的部分会被裁剪掉。我曾经在适配平板时吃过这个亏——手机上看好好的，一上平板，按钮全挤到屏幕外面去了。解决办法后面章节会讲。
1.4 对齐方式：让布局更整齐
光会排列还不够，你还得学会对齐。Row和Column都提供了两个对齐属性：
| 容器 | 主轴对齐 | 交叉轴对齐 |
|---|---|---|
| Row | justifyContent（水平方向） |
alignItems（垂直方向） |
| Column | justifyContent（垂直方向） |
alignItems（水平方向） |
别被这两个词吓到。说白了：
- 主轴：就是排列的方向。Row的主轴是水平，Column的主轴是垂直。
- 交叉轴：与主轴垂直的方向。
举个例子，我想让三个按钮在Row中水平居中，垂直也居中：
Row() {
Button('左')
Button('中')
Button('右')
}
.justifyContent(FlexAlign.Center) // 主轴居中
.alignItems(VerticalAlign.Center) // 交叉轴居中
.width('100%')
.height(100)
.backgroundColor('#E0E0E0')效果就是三个按钮在灰色区域的正中间。
避坑指南：我曾经把justifyContent和alignItems搞反了，结果按钮全跑到左上角去了。记住一个口诀：「主轴管排列，交叉轴管对齐」。排列决定子组件在主轴上的分布方式，对齐决定子组件在交叉轴上的位置。
1.5 权重分配：让子组件自适应
最后聊一个很实用的功能——权重（layoutWeight）。它可以让子组件按比例分配容器的剩余空间。
比如，我想做一个三栏布局，左栏占20%，中间占60%，右栏占20%：
Row() {
Column()
.layoutWeight(1)
.backgroundColor('#FF6B6B')
Column()
.layoutWeight(3)
.backgroundColor('#4ECDC4')
Column()
.layoutWeight(1)
.backgroundColor('#FFE66D')
}
.width('100%')
.height(200)这里layoutWeight的值是比例关系。1:3:1，所以三栏宽度比就是20%:60%:20%。
嗯，这里要注意：layoutWeight只在Row或Column的直接子组件上生效。如果你嵌套了一层容器，权重可能就不起作用了。我在做复杂页面时踩过这个坑，后来养成了习惯——需要权重的子组件，一定是容器的直接孩子。
小结
这一章咱们聊了：
- ArkUI是声明式UI框架，你只管描述UI长什么样
- 容器负责布局，组件负责展示
- Row和Column是最基础的线性布局容器
- 对齐方式用
justifyContent和alignItems控制 - 权重
layoutWeight让子组件按比例分配空间
下一章，咱们会深入Flex布局，看看比Row/Column更灵活的弹性布局怎么玩。到时候我会分享一个我在实际项目中用Flex解决「多设备适配」的案例，保证让你眼前一亮。
今天就到这儿。动手试试上面的代码，有问题咱们评论区见。