鸿蒙应用开发：Flex 组件从入门到实战

这是一个使用鸿蒙技术开发的本地原生记账应用，非常适合大家用来练手。相关源码已上传至 Github，点击此处查看项目。欢迎大家交流、指正，也欢迎提交 PR。

一、引言

在鸿蒙应用开发中，布局是构建用户界面的核心。Flex 组件是一种强大的弹性布局容器，它允许开发者以灵活、高效的方式排列子组件，轻松实现各种复杂的页面布局。本文将带你快速上手 Flex 组件，并通过一个实战案例，让你掌握其核心用法。

二、Flex 组件简介

Flex 组件与 Row 和 Column 组件类似，都是用于放置子元素的容器。但 Flex 提供了更丰富的配置项，可以更精细地控制子元素的排列方式、换行行为以及间距。

三、实战案例：实现一个标签列表

下面，我们通过一个具体的例子来演示如何使用 Flex 组件。假设我们要实现一个类似下图所示的标签列表页面，标签可以自动换行，并且排列整齐。

3.1 定义数据源

首先，我们需要定义一个数组，作为标签的数据源。这个数组里存放的是一些字符串，每个字符串代表一个标签。

typescript 复制代码

tags: string[] = ['鸿蒙', 'ArkTS', '开发', '教程', 'Flex布局', '组件', '实战', '入门'];

3.2 使用 Flex 组件渲染列表

接下来，在 Flex 组件中，我们使用 ForEach 循环来遍历这个数组。当遍历到数组的每一项时，渲染一个 Text 组件，也就是我们最终看到的标签内容。完整代码如下：

typescript 复制代码

import { LengthMetrics } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  tags: string[] = ['鸿蒙', 'ArkTS', '开发', '教程', 'Flex布局', '组件', '实战', '入门'];

  build() {
    Flex({ wrap: FlexWrap.Wrap, space: {main: LengthMetrics.vp(10), cross: LengthMetrics.vp(10)} , direction: FlexDirection.Row }) {
      ForEach(this.tags, (item: string) => {
        Text(item)
          .fontSize(14)
          .padding({ left: 12, right: 12, top: 6, bottom: 6 })
          .backgroundColor('#E8E8E8')
          .borderRadius(16)
      }, (item: string) => item)
    }
  }
}

运行效果：

3.3 核心配置项解析

在上面的代码中，我们使用了 Flex 组件的几个关键配置项：

wrap : 这个选项用来配置当里面的子元素超出容器宽度时，是否要换行。我们设置的是 FlexWrap.Wrap，让它自动换行。
space : 这个选项用来设置主轴和侧轴（交叉轴）上子元素之间的间距。{main: LengthMetrics.vp(10), cross: LengthMetrics.vp(10)} 表示主轴和侧轴方向上的间距都是 10。
direction : 这个选项用来设置子元素在 Flex 组件上的布局方向。默认是水平方向（FlexDirection.Row），我们也可以将其改为垂直方向（FlexDirection.Column），子元素就会垂直排列。

四、更多属性探索

除了上述属性，Flex 组件还提供了许多其他有用的属性，例如：

justifyContent: 设置子元素在主轴上的对齐方式（如开始、居中、末尾、均匀分布等）。
alignItems: 设置子元素在交叉轴上的对齐方式（如拉伸、开始、居中、末尾等）。
alignContent: 当有多行时，设置行在交叉轴上的对齐方式。

有兴趣的小伙伴可以下去试一试，探索更多 Flex 组件的强大功能。

五、总结

通过本文的学习，我们了解了 Flex 组件的基本用法，并通过一个标签列表的实战案例，掌握了其核心配置项 wrap、space 和 direction 的使用。Flex 组件是鸿蒙开发中实现灵活布局的利器，熟练掌握它将极大地提升你的开发效率。