第4章：UI组件基础

常用布局组件

1. 布局组件概述

ArkTS提供了多种布局组件用于构建灵活、响应式的用户界面。布局组件决定了子组件在屏幕上的排列方式，是UI开发的基础。本章将介绍ArkTS中最常用的几种布局组件及其核心特性。

2. 主要布局组件详解

2.1 Column（纵向布局）

Column({ space: 12 }) {
  Text('顶部元素').fontSize(20)
  Button('中间按钮').width(150)
  Image($r('app.media.icon')).width(50)
}
  • 功能：沿垂直方向排列子组件
  • 关键属性：
    • space：子组件间距（单位：vp）
    • alignItems：水平对齐方式（Start/Center/End）
  • 典型场景：表单、纵向列表、内容详情页

2.2 Row（横向布局）

Row({ space: 8 }) {
  Image($r('app.media.avatar')).width(40)
  Text('用户名').fontSize(16)
  Blank()
  Image($r('app.media.more')).width(20)
}
  • 功能：沿水平方向排列子组件
  • 关键属性：
    • space：子组件间距
    • verticalAlign：垂直对齐方式（Top/Center/Bottom）
  • 典型场景：导航栏、标签栏、横向滑动菜单

2.3 Stack（层叠布局）

Stack() {
  Image($r('app.media.background')).width('100%')
  Text('水印').fontColor('#66000000').align(Alignment.BottomEnd)
}
  • 功能：子组件按Z轴顺序堆叠
  • 关键特性：
    • 支持Alignment定位（TopStart/Center/BottomEnd等）
    • 常用于浮动按钮、遮罩层、图片叠加文字
  • 注意事项：默认子组件会填满整个Stack

2.4 Flex（弹性布局）

Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {
  ForEach(this.tags, (tag: string) => {
    Text(tag).padding(6)
  })
}
  • 高级特性：
    • 支持direction（Row/RowReverse/Column/ColumnReverse）
    • justifyContent：主轴对齐方式
    • alignItems：交叉轴对齐方式
    • wrap：是否换行（NoWrap/Wrap/WrapReverse）
  • 最佳实践：复杂自适应布局、等分空间排列

2.5 List（列表布局）

List({ space: 10 }) {
  ForEach(this.items, (item: Item) => {
    ListItem() {
      ItemComponent({ item: item })
    }
  }
}
  • 核心功能：
    • 高性能滚动列表
    • 支持横向/纵向滚动
    • 内置回收机制优化内存
  • 特殊用法：
    • ListItemGroup：分组列表
    • sticky：粘性头部

3. 布局嵌套与组合

实际开发中常需要组合多种布局：

Column() {
  // 顶部导航栏
  Row() {...}
  
  // 内容区域
  Scroll() {
    Column() {
      Stack() {...}
      Flex() {...}
    }
  }
  
  // 底部标签栏
  Row() {...}
}

4. 响应式布局技巧

  1. 百分比布局：width('80%')
  2. 相对单位：vp（虚拟像素）、fp（字体像素）
  3. 媒体查询：
.width(this.isWideScreen ? '60%' : '90%')
.fontSize(this.isLandscape ? 18 : 16)

5. 性能优化建议

  1. 避免过度嵌套（建议不超过5层）
  2. 对长列表使用ForEach而非多重循环
  3. 静态内容使用@State而非@Link
  4. 复杂布局考虑拆分为自定义组件

专家提示：使用DevEco Studio的布局检查器（Layout Inspector）可以实时查看组件树和布局边界，帮助调试复杂界面。

Last Updated::