HarmonyOS NEXT鸿蒙开发ArkUI：布局介绍-马育民老师

# 提出问题

如下图，当 `build()` 方法内有多个子组件时，就会报错：

[![](https://www.malaoshi.top/upload/0/0/1GW25bfgFyT8.png)](https://www.malaoshi.top/upload/0/0/1GW25bfgFyT8.png)

```
build() {
  Text('column布局：')
    .border({
      width:1,
      color:Color.Red
    })
  Text('用户名：')
    .border({
      width:1,
      color:Color.Red
    })
}
```

### 解决

使用布局

# 布局介绍

在 ArkUI 中，布局主要通过**容器组件**（Container Components）来实现。这些容器组件负责 **管理** 和 **排列** 其内部的子组件。

# 主要布局

###  Column (列布局)

**功能**：将子组件**垂直**排列。
**特点**：

*   子组件从上到下依次排列。
*   可以通过 `alignItems` 属性控制子组件在水平方向上的对齐方式（如 `Start`, `Center`, `End`）。
*   可以通过 `justifyContent` 属性控制子组件在垂直方向上的对齐和分布方式（如 `Start`, `Center`, `End`, `SpaceBetween`, `SpaceAround`）。

**适用场景**：创建垂直列表、表单、侧边栏等。

###  Row (行布局)
**功能**：将子组件**水平**排列。
**特点**：

*   子组件从左到右依次排列（在 LTR 文本方向下）。
*   通过 `alignItems` 控制子组件在垂直方向上的对齐方式。
*   通过 `justifyContent` 控制子组件在水平方向上的对齐和分布方式。

**适用场景**：创建工具栏、标签组、水平列表等。

### Stack (层叠布局)

**功能**：将子组件**堆叠**在一起，后添加的子组件会覆盖在先添加的子组件之上。
**特点**：

*   所有子组件默认占据整个 `Stack` 容器的空间。
*   可以通过 `align` 属性或为子组件设置 `alignSelf` 来控制单个子组件在层叠区域内的对齐方式。
*   常与 `Position` 或 `Offset` 属性结合使用，精确定位子组件。

**适用场景**：创建浮动按钮、模态框、图片和文字重叠、徽标（Badge）等。

### Flex (弹性布局)

**功能**：`Flex` 是 `Row` 和 `Column` 的底层实现，提供了更灵活的弹性布局能力。你可以通过 `direction` 属性指定主轴方向（`Row` 或 `Column`）。

**特点**：

*   支持 `wrap` 属性，当子组件超出容器时，可以自动换行。
*   子组件可以通过 `flexGrow`, `flexShrink`, `flexBasis` 等属性来控制其在主轴上的伸缩行为，实现复杂的自适应布局。

**适用场景**：需要子组件根据可用空间自动伸缩的复杂布局，如响应式网格、自适应卡片等。

### Grid (网格布局)

**功能**：将内容组织成二维的网格结构。

**特点**：

*   通过 `columnsTemplate` 和 `rowsTemplate` 定义网格的列宽和行高（可以使用 `fr`, `px`, `%` 等单位）。
*   子组件（`GridItem`）可以跨越多行或多列。
*   提供了强大的网格线控制和对齐选项。

**适用场景**：相册、商品列表、仪表盘、复杂的表单布局等需要精确网格控制的场景。

### List (列表布局)

**功能**：专门用于显示**长列表**数据，支持高效的**懒加载**（只渲染可视区域内的项目）。

**特点**：
*   性能优化，适合处理大量数据。
*   支持滚动、下拉刷新、上拉加载更多等交互。
*   子组件通常是 `ListItem`。

**适用场景**：消息列表、联系人列表、新闻流、商品瀑布流等。

### RelativeContainer (相对布局)

**功能**：通过定义子组件之间的**相对关系**来进行布局。

**特点**：

*   子组件可以使用 `alignRules` 属性来指定其相对于其他子组件或父容器的位置（如 `top`, `bottom`, `left`, `right`, `centerInParent` 等）。
*   布局逻辑更直观，类似于 CSS 中的相对定位。

**适用场景**：需要根据兄弟组件位置来定位的复杂 UI，或者从其他使用相对定位框架迁移过来的项目。

# 布局核心概念

### 声明式 UI
ArkUI 采用声明式语法（在 ArkTS 中），你只需描述 UI 应该是什么样子，框架会负责处理 UI 的创建和更新。这使得布局代码更简洁、更易理解。

### 对齐与分布

*   `alignItems`: 控制子组件在**交叉轴**上的对齐方式。
*   `justifyContent`: 控制子组件在**主轴**上的对齐和分布方式。
*   `alignSelf`: 覆盖 `alignItems`，为单个子组件设置在交叉轴上的对齐方式。

### 外边距 (margin) 与内边距 (padding)

*   `margin`：组件外部的空白区域，影响与其他组件的距离。
*   `padding`：组件内部的空白区域，影响内容与组件边框的距离。

### 约束 (Constraints)

每个组件在布局过程中都会收到父容器传递的尺寸约束（最小/最大宽度和高度）。组件需要根据这些约束和自身逻辑来决定最终尺寸。

# 布局使用建议

1.  **组合使用**：复杂的 UI 通常需要组合多种布局容器。例如，一个页面用 `Column` 布局，其内部的标题用 `Row` 布局，列表项用 `Grid` 布局。
2.  **优先选择语义化容器**：如果 `List` 能满足需求，优先使用 `List` 而不是 `Column`，因为 `List` 有性能优化。
3.  **利用弹性布局**：`Flex` 布局非常强大，是实现自适应 UI 的首选。
4.  **考虑性能**：避免过度嵌套布局容器，这会影响布局计算的性能。
5.  **响应式设计**：利用 `Grid`、`Flex` 的弹性特性，以及条件渲染，为不同尺寸的设备提供良好的用户体验。

原文出处：http://www.malaoshi.top/show_1GW25by7TZuW.html