HarmonyOS NEXT鸿蒙开发ArkUI：布局介绍

作者：马育民 • • 阅读：10060

提出问题

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

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 的弹性特性，以及条件渲染，为不同尺寸的设备提供良好的用户体验。

原文出处：/show_1GW25by7TZuW.html

吉ICP备15003043号