鸿蒙OS中弹性布局（Flex）的详细使用

本文同步发表于我的微信公众号，微信搜索 程语新视界 即可关注，每个工作日都有文章更新

一、Flex布局基础概念

1. 主轴与交叉轴

• 主轴：由flexDirection属性决定方向，子元素默认沿主轴排列（默认水平方向）。
• 交叉轴：垂直于主轴，用于控制子元素垂直方向的排列方式。

2. Flex容器与项目

• 容器：通过Flex组件定义，可设置布局方向、换行、对齐等属性。
• 项目：容器内的直接子组件，可通过flex权重分配剩余空间 。

二、核心属性与API详解

1. 布局方向（direction）

通过FlexDirection设置主轴方向：

// 水平方向排列（默认）
Flex({ direction: FlexDirection.Row }) { ... }

// 水平反向排列
Flex({ direction: FlexDirection.RowReverse }) { ... }

// 垂直方向排列
Flex({ direction: FlexDirection.Column }) { ... }

// 垂直反向排列
Flex({ direction: FlexDirection.ColumnReverse }) { ... }

效果：Row从左到右，RowReverse从右到左；Column从上到下，ColumnReverse从下到上。

2. 布局换行（wrap）

通过FlexWrap控制子元素是否换行：

// 不换行（默认）
Flex({ wrap: FlexWrap.NoWrap }) { ... }

// 换行（主轴方向）
Flex({ wrap: FlexWrap.Wrap }) { ... }

// 换行（主轴反方向）
Flex({ wrap: FlexWrap.WrapReverse }) { ... }

场景：当子元素总宽度超过容器时，Wrap换行显示，WrapReverse反向换行。

3. 主轴对齐（justifyContent）

通过FlexAlign设置主轴对齐方式：

// 左对齐
.justifyContent(FlexAlign.Start)

// 居中对齐
.justifyContent(FlexAlign.Center)

// 右对齐
.justifyContent(FlexAlign.End)

// 两端对齐，间距相等
.justifyContent(FlexAlign.SpaceBetween)

// 环绕对齐，两侧间距为中间间距的一半
.justifyContent(FlexAlign.SpaceAround)

// 完全均分间距
.justifyContent(FlexAlign.SpaceEvenly)

 示例：

Row() {
  Text('1').width(100).height(100)
  Text('2').width(100).height(100)
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)  // 两端对齐[[5][9]]

4. 交叉轴对齐（alignItems）

通过VerticalAlign或HorizontalAlign设置交叉轴对齐：

// 顶部对齐
.alignItems(VerticalAlign.Top)

// 居中对齐
.alignItems(VerticalAlign.Center)

// 底部对齐
.alignItems(VerticalAlign.Bottom)

// 拉伸填充
.alignItems(VerticalAlign.Stretch)

示例：

Column() {
  Row() { ... }.height(50).backgroundColor(Color.Red)
  Row() { ... }.height(120).backgroundColor(Color.Orange)
}
.alignItems(HorizontalAlign.Center)  // 水平居中对齐

5. 子元素权重（flex）

通过flex属性分配剩余空间：

Row() {
  Text('1').flex(1)  // 占1份
  Text('2').flex(2)  // 占2份
  Text('3').flex(1)  // 占1份
}

效果：总宽度按比例分配，适用于等分布局。

三、常见布局场景

1. 等分布局

Row() {
  ForEach([1,2,3], (item) => {
    Column() {
      Text(`${item}`).fontSize(20)
    }.flex(1).height(100).backgroundColor(Color.Gray)
  })
}
.width('100%')

2. 居中布局

Column() {
  Text('居中内容').fontSize(20).backgroundColor(Color.Gray)
}
.width('100%').height('100%')
.justifyContent(FlexAlign.Center)  // 主轴居中
.alignItems(HorizontalAlign.Center) // 交叉轴居中

3. 导航栏布局

Row() {
  Image($r('app.media.logo')).width(40).height(40)
  Text('标题').fontSize(20).flex(1).textAlign(TextAlign.Center)
  Image($r('app.media.menu')).width(40).height(40)
}
.width('100%').height(60).padding(10)  // 标题自适应居中

四、性能优化

1. 避免嵌套过深：Flex布局层级过多可能导致渲染性能下降。
2. 优先使用flex权重：代替固定宽度，增强布局适配性。
3. 合理使用换行：多行布局时设置wrap属性，避免内容溢出