文章目录一、引言二、Flex 组件简介三、实战案例实现一个标签列表3.1 定义数据源3.2 使用 Flex 组件渲染列表3.3 核心配置项解析四、更多属性探索五、总结这是一个使用鸿蒙技术开发的本地原生记账应用非常适合大家用来练手。相关源码已上传至 Github点击此处查看项目。欢迎大家交流、指正也欢迎提交 PR。一、引言在鸿蒙应用开发中布局是构建用户界面的核心。Flex组件是一种强大的弹性布局容器它允许开发者以灵活、高效的方式排列子组件轻松实现各种复杂的页面布局。本文将带你快速上手Flex组件并通过一个实战案例让你掌握其核心用法。二、Flex 组件简介Flex组件与Row和Column组件类似都是用于放置子元素的容器。但Flex提供了更丰富的配置项可以更精细地控制子元素的排列方式、换行行为以及间距。三、实战案例实现一个标签列表下面我们通过一个具体的例子来演示如何使用Flex组件。假设我们要实现一个类似下图所示的标签列表页面标签可以自动换行并且排列整齐。3.1 定义数据源首先我们需要定义一个数组作为标签的数据源。这个数组里存放的是一些字符串每个字符串代表一个标签。tags:string[][鸿蒙,ArkTS,开发,教程,Flex布局,组件,实战,入门];3.2 使用 Flex 组件渲染列表接下来在Flex组件中我们使用ForEach循环来遍历这个数组。当遍历到数组的每一项时渲染一个Text组件也就是我们最终看到的标签内容。完整代码如下import{LengthMetrics}fromkit.ArkUI;EntryComponentstruct 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组件是鸿蒙开发中实现灵活布局的利器熟练掌握它将极大地提升你的开发效率。
