【鸿蒙南向开发】OpenHarmony——Flex和Grid布局解析

Flex布局

概述

Flex布局是很常用也是很方便的一种布局模式，此种布局方式已经广泛使用在前端、小程序开发之中，如果之前已经学习过 Flex 布局，那么在 OpenHarmony 中也是大同小异的。

用法

1. 容器的常用参数

• direction：子组件在Flex容器上排列的方向，即主轴的方向。
• wrap：Flex容器是单行/列还是多行/列排列。
• justifyContent：子组件在Flex容器主轴上的对齐格式。
• alignItems：子组件在Flex容器交叉轴上的对齐格式。
• alignContent：交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。

2. 子组件常用属性（不是所有属性）

• flexGrow： Flex容器的剩余空间分配给给此属性所在的组件的比例。

3. 简单的使用

Flex布局的属性有很多，但是最常用的还是让子组件垂直水平居中，两条属性即可保证子组件垂直水平居中：

Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
  Text('水平垂直居中显示').fontSize(18)
}.wi