程序员Feri，13 年编程老炮，实战派技术人（开发/架构/教学/创业），拆解编程技巧、分享副业心得，记录程序员的进阶路，AI 时代一起稳稳向前。

把APP界面开发比作“搭积木”，ArkUI就是你的“积木工具箱”——既有拼界面的“零件”（组件），又有定规则的“图纸”（布局），还能给积木贴“便利贴”（注释）。

今天咱们就用最接地气的例子，把ArkUI注释、基础布局讲明白，哪怕是刚入门，也能跟着做出整齐又好看的界面。

一、ArkUI：APP的“脸面设计师”+“笔记管家”

ArkUI的核心作用就俩：

• 一是帮你画出用户能看到的“脸面”（UI界面）
• 二是帮你给代码写“笔记”（注释），方便自己和别人看懂。咱们先从这俩核心说起。

1.1 先搞懂：UI、组件是啥？用“生活比喻”秒会

• UI（用户界面）：就是APP的“脸面”——比如微信的聊天界面、抖音的视频界面，你眼睛看到、手指摸到的所有部分，都是UI。
• 组件：就是拼“脸面”的“最小积木块”——像按钮（点一下跳转的方块）、文本（显示文字的标签）、列表（刷朋友圈的滚动条）、进度条（下载文件的进度条），单独拿出来不能用，拼在一起才是完整界面。

简单说：用“组件”当积木，按“布局”规则拼，最后出来的就是“UI界面”。

1.2 代码注释：给代码写“便利贴”，3种场景对应3种写法

写代码就像记笔记，时间长了容易忘——这时候“注释”就是你的“便利贴”，只给开发者看，APP运行时会自动忽略。鸿蒙里有3种注释，对应不同“记笔记”场景：

小技巧：写注释别偷懒！比如你写了一段布局代码，当时记得是“底部导航栏”，过一周可能就忘了——加一句// 底部导航栏：首页+我的，下次看一眼就懂。

二、基础布局：给组件“排好队”的艺术

组件是“积木”，布局就是“排队规则”——比如让按钮“从左到右站一排”，还是“从上到下叠一列”，全靠布局定。

鸿蒙里的布局有6种，但新手先吃透“用得最多的线性布局”，其他布局用到再学就行。

2.1 先看全局：6种布局对应6种“排队场景”

不用死记硬背，记住“什么场景用什么布局”就行，就像不同场合排队有不同规则：

划重点：新手先主攻线性布局（Row/Column） ——它是其他布局的基础，学会了能搞定大部分界面，比如登录页、列表页、设置页。

2.2 线性布局（一）：Row行布局——让组件“从左到右排排队”

Row布局的核心是“水平排队”：比如顶部导航栏的“返回按钮+标题+设置按钮”，就是用Row排的。

咱们从“语法+核心属性+示例”三部分讲，看完就能用。

1. 先看语法：Row布局的“固定公式”

就像做奶茶有“茶底+配料”的固定步骤，Row布局也有固定写法，记住这个公式就行：

Row({ 初始属性: 值 }) { // 比如设置“排队间距”  // 这里放要排队的组件：文本、按钮、甚至其他布局  Text("组件1")  Button("组件2")  Column() { /* 嵌套的列布局 */ }}// 这里放后续属性：比如对齐方式、宽高.属性名(属性值)

2. 核心属性：3个属性搞定“排队规则”

Row布局的“排队规则”就3个：间距、水平对齐、垂直对齐。

用“买奶茶排队”的例子一讲就懂：

注意：FlexAlign（主轴对齐）有6个常用值，记3个最常用的就行：

• FlexAlign.Start：靠左排（默认）
• FlexAlign.Center：居中排
• FlexAlign.End：靠右排

3. 实战示例：用Row做一个“顶部导航栏”

咱们写一段代码，做一个“返回+标题+设置”的导航栏，看看效果：

// 顶部导航栏：用Row布局实现水平排队Row({ space: 15 }) { // 组件之间隔15像素  // 左边：返回按钮  Button("← 返回")    .fontColor(Color.White)    .backgroundColor("#327FFF")    // 中间：标题（占满剩余空间，让设置按钮靠最右）  Text("我的页面")    .fontSize(20)    .flexGrow(1) // 关键：让文本占满中间剩余空间    // 右边：设置按钮  Button("设置")    .fontColor(Color.White)    .backgroundColor("#327FFF")}.width("100%") // 导航栏占满屏幕宽度（否则对齐没效果！）.height(50) // 导航栏高度50像素.padding({ left: 15, right: 15 }) // 左右留15像素空隙，不贴边.backgroundColor("#F5F5F5")

效果：返回按钮在左，设置按钮在右，标题居中——这就是日常APP导航栏的常见样式，用Row+flexGrow(1)就能轻松实现。

2.3 线性布局（二）：Column列布局——让组件“从上到下叠一列”

如果说Row是“左右排队”，Column就是“上下叠列”——比如登录页的“账号输入框+密码输入框+登录按钮”，就是用Column排的。它的逻辑和Row几乎一样，只是“主轴方向变了”。

1. 语法：和Row几乎一样，换个名字就行

Column({ space: 20 }) { // 组件之间隔20像素（上下间距）  Text("账号")  TextInput() // 输入框组件  Text("密码")  TextInput()  Button("登录")}.width("100%").height("100%")

2. 核心属性：主轴变垂直，对齐方式跟着变

Column的“主轴”是垂直方向（上下），“交叉轴”是水平方向（左右），所以对齐属性的作用也变了，用“坐电梯排队”类比：

新手坑：为什么对齐没效果？

比如给Column加了.justifyContent(FlexAlign.End)（垂直靠下），但没设height("100%")——就像电梯只有1米高，人根本没空间“靠下站”，所以一定要给布局设足够的宽/高！

3. 实战示例：用Column做一个“登录界面”

咱们把“账号、密码、登录按钮”用Column排好，再加点样式：

@Entry@Componentstruct Page1 {  build() {    Column({ space: 20 }) { // 组件之间隔20像素（上下间距）      Text("欢迎登录")        .fontSize(30)        .fontWeight(FontWeight.Bold)      Text("账号：")      TextInput() // 输入框组件        .padding(15)        .border({width:1,color: "#00dedcdc",radius:10})      Text("密码：")      TextInput()        .type(InputType.Password)        .padding(15)        .border({width:1,color:"#00dedcdc",radius:10})      Button("登录")        .width("90%")        .margin(10)        .padding(20)        .borderRadius(10)    }    .alignItems(HorizontalAlign.Start)    .padding(20)    .width("100%")    .height("100%")  }}

效果：标题在上，账号、密码输入框居中，登录按钮在下——一个简洁的登录界面就做好了，完全符合日常APP的使用习惯。

2.4 布局嵌套：“Row套Column”，搭出复杂界面

真实APP的界面不会只有“纯Row”或“纯Column”，比如计算器界面：数字键是“3列3行”（Column套Row），功能键是“1列”（Column）。

这时候就需要“布局嵌套”——记住一个核心规则：build函数里只能有一个“根布局”（就像房子只能有一个地基），根布局里再套其他布局。

三、新手必记的3个开发小技巧

1. 根布局必设宽高：想让布局对齐生效，先给根布局设width("100%")和height("100%")，否则组件没空间“排队”；
2. 重复组件要封装：像计算器的按钮，重复写4次太麻烦，封装成buildButton函数，调用时只需传文字，效率翻倍；
3. 先搭骨架再填肉：开发界面时，先用水印Text/Button搭好布局结构（比如先排好Row/Column的位置），再慢慢加样式（颜色、字体），不容易乱。