鸿蒙开发：弹性布局Flex

前言

代码案例基于Api13。

正在开发一个搜索组件，其中一个功能是针对历史搜索的内容进行展示，由于搜索的内容长度不一，需要进行流式布局展示，效果如下：

以上的效果，相信大家在很多的应用里或多或少都见到过，那么在鸿蒙当中如何实现呢？也是非常的简单，系统给我们提供弹性布局Flex，使用它，可以帮助我们快速的进行实现。

@Entry
  @Component
  struct Index {
    @State searchList: string[] = ["程序员一鸣", "App开发干货铺", "程序员修养", "鸿蒙4.0", "HarmonyOS NEXT","开发","中","这是一个非常长的搜索内容，请须知！"]

    build() {
      Column() {

        Text("历史搜索")
          .fontSize(18)
          .fontColor(Color.Black)
          .fontWeight(FontWeight.Bold)

        Flex({ wrap: FlexWrap.Wrap }) { 
          ForEach(this.searchList, (item: string) => {
            Text(item)
              .backgroundColor("#e8e8e8")
              .padding({
                left: 10,
                right: 10,
                top: 5,
                bottom: 5
              }).margin({ right: 10, bottom: 10 })
              .borderRadius(5)
          })
        }.margin({ top: 10 })
      }
      .height('100%')
        .width('100%')
        .padding({ left: 10, right: 10 })
        .alignItems(HorizontalAlign.Start)
        .justifyContent(FlexAlign.Center)
    }
  }

什么是Flex

一句话解读：主要对容器中的子元素进行排列、对齐和分配剩余空间；它允许开发者通过简单的属性设置来实现复杂的布局效果，其核心思想就是让容器能够根据子元素的大小和排列方式自动调整布局，从而实现灵活的界面设计。

主要特点有，灵活性：Flex布局可以根据容器的大小自动调整子元素的排列方式和大小。方向性：Flex布局支持水平和垂直两种排列方向，开发者可以根据需要选择合适的排列方式。对齐方式：Flex布局提供了多种对齐方式，如居中、两端对齐、等间距对齐等，方便开发者实现各种复杂的布局效果。

它有主轴和交叉轴概念，所谓的主轴就是水平方向，交叉轴就是垂直方向，主轴开始的位置称为主轴起始点，结束位置称为主轴结束点，交叉轴开始的位置称为交叉轴起始点，结束位置称为交叉轴结束点。

使用方式

简单使用方式如下：

Flex({ direction: FlexDirection.Row }) {
        Text('元素1')
          .padding(10)
          .backgroundColor(Color.Red)
        Text('元素2')
          .padding(10)
          .backgroundColor(Color.Pink)
        Text('元素3')
          .padding(10)
          .backgroundColor(Color.Orange)
      }

控制方向

通过direction属性来控制子元素的方向，目前有四个可选项。

名称	说明
Row	主轴与行方向一致作为布局模式。
RowReverse	与Row方向相反方向进行布局。
Column	主轴与列方向一致作为布局模式。
ColumnReverse	与Column相反方向进行布局。

Row

代码：

Flex({ direction: FlexDirection.Row }) {
        Text('元素1')
          .padding(10)
          .backgroundColor(Color.Red)
        Text('元素2')
          .padding(10)
          .backgroundColor(Color.Pink)
        Text('元素3')
          .padding(10)
          .backgroundColor(Color.Orange)
      }

效果：

RowReverse

代码：

 Flex({ direction: FlexDirection.RowReverse }) {
        Text('元素1')
          .padding(10)
          .backgroundColor(Color.Red)
        Text('元素2')
          .padding(10)
          .backgroundColor(Color.Pink)
        Text('元素3')
          .padding(10)
          .backgroundColor(Color.Orange)
      }

效果：

Column

代码：

      Flex({ direction: FlexDirection.Column }) {
        Text('元素1')
          .padding(10)
          .backgroundColor(Color.Red)
        Text('元素2')
          .padding(10)
          .backgroundColor(Color.Pink)
        Text('元素3')
          .padding(10)
          .backgroundColor(Color.Orange)
      }

效果：

ColumnReverse

代码：

      Flex({ direction: FlexDirection.ColumnReverse }) {
        Text('元素1')
          .padding(10)
          .backgroundColor(Color.Red)
        Text('元素2')
          .padding(10)
          .backgroundColor(Color.Pink)
        Text('元素3')
          .padding(10)
          .backgroundColor(Color.Orange)
      }

效果：

控制行/列

通过wrap属性，来控制是单行/列还是多行/列排列，有三个参数可选择。

名称	说明
NoWrap	Flex容器的元素单行/列布局，子元素尽可能约束在容器内。当子元素有最小尺寸约束等设置时，Flex容器不会对其强制弹性压缩。
Wrap	Flex容器的元素多行/列排布，子项允许超出容器。
WrapReverse	Flex容器的元素反向多行/列排布，子项允许超出容器。

加上wrap属性，则就允许实现多行/列排布。

Flex({ direction: FlexDirection.Row,wrap:FlexWrap.Wrap}) {
        Text('元素1')
          .width(100)
          .padding(10)
          .backgroundColor(Color.Red)
        Text('元素2')
          .padding(10)
          .width(100)
          .backgroundColor(Color.Pink)
        Text('元素3')
          .padding(10)
          .width(100)
          .backgroundColor(Color.Orange)
        Text('元素4')
          .padding(10)
          .width(100)
          .backgroundColor(Color.Gray)
      }

我们看下效果，当子元素超出容器宽度时，会自动换行。

对齐方式

对其方式，有两种，一种是主轴方向，一种是交叉轴方向，主轴方向使用justifyContent属性，交叉轴方向使用alignItems。

justifyContent

名称	说明
Start	元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。
Center	元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
End	元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。
SpaceBetween	Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。
SpaceAround	Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
SpaceEvenly	Flex主轴方向均匀分配弹性元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

alignItems

名称	说明
Auto	使用Flex容器中默认配置。
Start	元素在Flex容器中，交叉轴方向首部对齐。
Center	元素在Flex容器中，交叉轴方向居中对齐。
End	元素在Flex容器中，交叉轴方向底部对齐。
Stretch	元素在Flex容器中，交叉轴方向拉伸填充。容器为Flex且设置Wrap为FlexWrap.Wrap或FlexWrap.WrapReverse时，元素拉伸到与当前行/列交叉轴长度最长的元素尺寸。其余情况下，无论元素尺寸是否设置，均拉伸到容器尺寸。
Baseline	元素在Flex容器中，交叉轴方向文本基线对齐。

子元素属性

除了通过Flex容器来控制之外，里面子元素也可以自由控制占位情况，比如通过flexGrow来分配剩余空间的比例，通过flexShrink，来压缩比例（默认1，可压缩）通过alignSelf来覆盖容器的交叉轴对齐方式。

比如，我们给第三个元素，设置完全占用剩余空间：

Flex({ direction: FlexDirection.Row }) {
        Text('元素1')
          .width(100)
          .padding(10)
          .backgroundColor(Color.Red)
        Text('元素2')
          .padding(10)
          .width(100)
          .backgroundColor(Color.Pink)
        Text('元素3')
          .padding(10)
          .width(100)
          .flexGrow(1)
          .backgroundColor(Color.Orange)
      }

查看效果：

相关总结

在实际的开发中，需要掌握主轴与交叉轴的关系、换行规则及子元素属性，同时注意性能与兼容性问题，还有一点，Flex组件在渲染时存在二次布局过程，因此在对性能有严格要求的场景下建议使用Column、Row代替。