一、ArkUI 组件与布局（手把手操作步骤）

学习目标

• 理解声明式 UI：UI = 用代码"描述"长什么样，不是"命令"怎么画
• 掌握 6 类布局容器（Column / Row / Stack / Flex / List / Grid）的选用
• 能用基础组件（Text / Button / Image / TextInput 等）拼页面
• 理解尺寸单位 vp / fp / px，避免 overflow（溢出）

本周工具说明（无需新装）

• 在 W1 项目里改 entry/src/main/ets/pages/Index.ets 的 build() 即可，所见即所得。
• 推荐用 Previewer（预览器）：右侧实时预览，改一行立即刷新，比每次跑模拟器快。打开方式：点 build() 上方的 Previewer 标签，或菜单 Tools → Previewer。
• 真机/模拟器也能看，但调 UI 时预览器最高效。

步骤一、理解声明式 UI 的写法
ArkUI 用 ArkTS 写 UI，长这样：

build() {
  Column() {
    Text('你好，鸿蒙')
      .fontSize(20)
      .fontColor('#000000')
  }
  .width('100%')
  .height('100%')
}

要点：

• build() 里用组件嵌套描述 UI 结构（树状）。
• 链式调用 .属性() 设样式（如 .fontSize(20)）。
• 容器（Column）套子组件，形成父子关系。

步骤二、认识布局容器（UI 成败关键）

容器	作用	关键属性
Column	纵向排列	space、justifyContent、alignItems
Row	横向排列	同上
Stack	层叠（覆盖）	alignContent
Flex	弹性布局	direction、wrap
List / ListItem	列表	for_each、lazy
Grid	网格	columnsTemplate

选用口诀：上下排→Column；左右排→Row；叠加浮层→Stack；自适应弹性→Flex；长列表→List；九宫格→Grid。

步骤三、Column + Row 搭骨架

build() {
  Column() {
    Row() {
      Text('左')
      Text('右')
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)

    Text('下方内容')
  }
  .width('100%')
  .height('100%')
  .padding(16)
}

• space：子项间距，如 .space(10)。
• justifyContent：主轴对齐（如 FlexAlign.Center 居中）。
• alignItems：交叉轴对齐（如 HorizontalAlign.Start 左对齐）。
  验证：预览器里看到"左/右"分列、下方文字，骨架即成立。

步骤四、基础组件逐个用

Text('标题').fontSize(20).fontWeight(FontWeight.Bold)
Button('点我').onClick(() => { /* 点击逻辑，W4 学 */ })
Image($r('app.media.icon')).width(60).height(60)   // 引用 resources 里的图片
TextInput({ placeholder: '请输入' }).width('100%')
Divider().strokeWidth(1).color('#eeeeee')          // 分隔线
Blank()                                             // 占位撑开空间

• Image 引用资源图：先把图放进 entry/src/main/resources/base/media/，再用 $r('app.media.文件名') 引用（不含扩展名）。
• 练习：在 Column 里竖直排 Text + Image + Button + TextInput，各自设宽高，预览器看效果。

步骤五、常用属性与尺寸单位（避坑重点）

• 尺寸写法：width('100%')、width('100vp')、width(100)（默认 px，少用）、height('100%')。
• vp（虚拟像素）：随屏幕密度自适应，写 UI 首选。
• fp（字体像素）：字号用，随系统字体设置缩放（无障碍友好）。
• px（物理像素）：固定不缩放，少用。
• 其他：padding(16) / margin(8)、backgroundColor('#F5F5F5')、borderRadius(8)、fontSize(16)。
  坑：写死 px 大值会导致小屏 overflow；统一用 vp 或 % 更稳。

步骤六、用 Stack 做浮层（头像角标示例）

Stack() {
  Image($r('app.media.avatar')).width(80).height(80)
  Text('99+')
    .fontSize(12)
    .backgroundColor('#FF0000')
    .fontColor('#FFFFFF')
    .borderRadius(8)
    .padding({ left: 4, right: 4 })
    .position({ x: 55, y: -5 })   // 相对 Stack 定位
}
.width(80)
.height(80)

Stack 让子项层叠，配 .position() 做角标、红点等浮层。

步骤七、做"个人名片页"综合练习（验收用）
组合以上，做一个名片页：

build() {
  Column() {
    // 头像（圆形）
    Image($r('app.media.avatar'))
      .width(80).height(80).borderRadius(40)
      .margin({ bottom: 12 })

    // 姓名
    Text('张三').fontSize(22).fontWeight(FontWeight.Bold)

    // 简介
    Text('鸿蒙开发者 · 热爱声明式 UI')
      .fontSize(14).fontColor('#666666')
      .margin({ top: 6, bottom: 16 })

    // 按钮
    Button('关注').width(120).height(36).borderRadius(18)
  }
  .width('100%').height('100%')
  .justifyContent(FlexAlign.Center)
  .alignItems(HorizontalAlign.Center)
  .padding(16)
}

验收：头像圆形、姓名加粗、简介灰色、按钮居中；真机/模拟器/预览器显示正常，无 overflow 告警（编辑器底部或预览器若有黄色警告即说明布局溢出）。

必须记住的点

• ArkUI 是声明式：描述"长什么样"，由框架算怎么画；改 @State 数据会自动重绘（W4 深学）。
• 布局先选容器（Column/Row/Stack/Flex/List/Grid），再往里塞组件。
• 尺寸首选 vp / %，别写死 px。
• 预览器（Previewer）调 UI 最快，优先用它。

常见坑（提前避）

1. build() 只能返回一个根容器；要并列多个，用 Column/Row 包一层。
2. Image 用 $r('app.media.xxx') 引用资源图，文件名不含扩展名，且图要先放进 resources/base/media/。
3. 忘记给容器设 width/height，组件可能不显示或只占内容大小。
4. overflow 告警通常是子项总宽/高超过父容器——改用 100% / vp 或加 Scroll 滚动。
5. Row 默认横向、不换行；需要换行用 Flex({ wrap: FlexWrap.Wrap })。
6. 链式属性顺序无所谓，但必须写在组件后、下一个组件/容器前。

实操任务：完成上面 7 步 → 做出"个人名片页"（头像+姓名+简介+按钮），布局与设计一致、无 overflow。
验收：预览器/真机显示正常，编辑器无 overflow 告警，能把页面结构讲清楚（哪个容器套哪个组件）。

---

二、参考学习链接

1. 官方下载

• DevEco Studio 官方下载（唯一地址）：https://developer.huawei.com/consumer/cn/deveco-studio/
• 华为开发者账号注册：https://developer.huawei.com/consumer/cn/
• DevEco Studio 下载与安装官方说明：https://device.harmonyos.com/cn/docs/apiref/harmonyos-guides/ide-software-install

2. 官方文档

• HarmonyOS 应用开发指南（harmonyos-guides，认准 NEXT/Stage）：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides
• ArkUI 声明式开发文档（在指南站内检索 “ArkUI” / “声明式” 定位组件与布局章节）：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides
• 仓颉编程语言官网：https://cangjie-lang.cn/

3. 社区与踩坑

• 华为开发者论坛：https://developer.huawei.com/consumer/cn/forum/
• CSDN 鸿蒙专区 / 51CTO 鸿蒙开发者社区：检索"ArkUI 布局"“Column Row 用法”"overflow 告警"等

4. Markdown 写作参考（CSDN 发布用）

• Markdown 基础语法（CSDN 文章排版参考）：https://blog.csdn.net/weixin_45494811/article/details/104307670