程序员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）	组件“排成一条线”（水平/垂直）	买奶茶排队（水平Row）、坐电梯排队（垂直Column）	90%的基础界面都用它，比如顶部标题栏（Row）、列表选项（Column）
层叠布局（Stack）	组件“叠在一起”，一层盖一层	叠煎饼（酱料叠在饼上）、贴便利贴（新的贴在旧的上面）	需要覆盖效果时，比如弹窗盖在主界面上、图片上叠文字
弹性布局（Flex）	组件“能伸能缩”，自动填充满空间	挤地铁（人多了就缩一缩，人少了就伸开）	多个组件要占满一行/一列时，比如底部导航栏的3个按钮平分宽度
相对布局（RelativeContainer）	组件“按参照物定位”，想放哪放哪	电影院找座（“我在第5排第3座旁边”）	界面元素杂乱时，比如地图上的标记点（相对于地图定位）
栅格布局（GridRow/GridCol）	按“格子”定位，适配不同屏幕	教室座位表（无论教室大小，每个座位都在格子里）	多设备适配，比如手机上2列图片、平板上4列图片
选项卡（Tabs）	切换不同“页面视图”，像翻本子	笔记本翻页（第一页记笔记、第二页画草图）	同一页面切换内容，比如微信的“微信/通讯录/发现”切换

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

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

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

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

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

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

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

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

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

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

核心属性	作用	生活类比	语法示例
space（初始属性）	设置组件之间的“排队间距”	排队买奶茶时，人与人之间隔20厘米	Row({ space: 20 }) // 组件之间隔20像素
justifyContent	组件在“水平方向”的对齐方式（Row的“主轴”是水平）	排队时所有人站左边、右边，还是中间	.justifyContent(FlexAlign.End) // 所有组件靠右边排
alignItems	组件在“垂直方向”的对齐方式（Row的“交叉轴”是垂直）	排队时所有人踮脚（靠上）、弯腰（靠下），还是站直（居中）	.alignItems(VerticalAlign.Top) // 所有组件靠顶部对齐

注意：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的“主轴”是垂直方向（上下），“交叉轴”是水平方向（左右），所以对齐属性的作用也变了，用“坐电梯排队”类比：

核心属性	作用	生活类比	语法示例
space	组件之间的“上下间距”	坐电梯排队，人与人之间隔20厘米	Column({ space: 20 })
justifyContent	组件在“垂直方向”的对齐方式（主轴）	电梯里的人站顶部、底部，还是中间	.justifyContent(FlexAlign.Center) // 所有组件垂直居中
alignItems	组件在“水平方向”的对齐方式（交叉轴）	电梯里的人站左边、右边，还是中间	.alignItems(HorizontalAlign.Center) // 所有组件水平居中

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

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

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

@Entry
@Component
struct 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的位置），再慢慢加样式（颜色、字体），不容易乱。

如果大家想考取鸿蒙开发者认证的，欢迎加入我的专属考试链接中：https://developer.huawei.com/consumer/cn/training/classDetail/6ce9d5a998724a849ec634f318107d37?type=1?ha_source=hmosclass&ha_sourceId=89000248