Flex弹性布局及如何在Scroll组件中使用Flex 原创

1. 效果演示

弹性布局演示

scroll嵌套弹性布局演示

2. 引言

灵活的布局方式是提升用户体验的关键因素之一。尤其是当应用需要处理动态内容时，能够自适应内容长度的布局显得尤为重要。本文档旨在详细讲解如何在openHarmony中使用Scroll组件结合Flex弹性布局来实现无固定高度的内容展示，并且使得每个Flex子元素的宽度能够自适应。

3. Flex布局基础

Flex布局（Flexible Box Layout）是一种用于一维布局的CSS布局模式。它使得容器内的子元素可以根据容器的大小和子元素的数量进行灵活的排列和调整。在HarmonyOS的组件化开发中，Flex布局同样被广泛使用，以实现复杂且自适应的UI设计。

3.1 Flex布局的基本概念

Flex布局的核心思想是将容器内的子元素视为一条线（主轴）上的项目进行布局。主轴的方向可以通过direction属性来定义，可以是水平（Row）或垂直（Column）。子元素在主轴上的排列方式可以通过justifyContent属性来控制，而在交叉轴上的对齐方式可以通过alignItems属性来控制。

• 主轴（Main Axis）：定义了子元素的排列方向。默认情况下，主轴是水平方向（FlexDirection.Row），但可以通过direction属性设置为垂直方向（FlexDirection.Column）。
• 交叉轴（Cross Axis）：与主轴垂直的方向。如果主轴是水平方向，则交叉轴是垂直方向；反之亦然。

3.2 Flex布局的关键属性

以下是一些在Flex布局中最常用的关键属性：

• direction：定义主轴的方向。可选值为FlexDirection.Row（水平方向，默认）和FlexDirection.Column（垂直方向）。
• wrap：定义子元素是否换行。可选值为FlexWrap.Wrap（允许换行）和FlexWrap.NoWrap（不允许换行，默认）。
• justifyContent：定义子元素在主轴上的对齐方式。可选值包括JustifyContent.Start、JustifyContent.End、JustifyContent.Center、JustifyContent.SpaceBetween、JustifyContent.SpaceAround等。
• alignItems：定义子元素在交叉轴上的对齐方式。可选值包括HorizontalAlign.Start、HorizontalAlign.End、HorizontalAlign.Center等。
• alignContent：定义多根轴线在交叉轴上的对齐方式。当子元素换行时有效。可选值包括FlexAlign.Start、FlexAlign.End、FlexAlign.Center、FlexAlign.SpaceBetween、FlexAlign.SpaceAround等。

3.3 Flex布局示例

private arr: number[] = [111,12, 2, 3, 4, 52222, 111111111, 7, 8, 9]
  build() {
    Column() {
      Flex({ wrap: FlexWrap.Wrap, direction: FlexDirection.Row }) {
        ForEach(this.arr, (item:number, index:number) => {
          Text(`Item ${item}`)
            .margin({ top: 4, left: 2 })
            .fontSize(16)
            .fontColor('#000000')
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Clip })
            .padding({ left: 10, right: 10, bottom: 5 })
            .borderRadius(5)
            .margin({ top: 7, right: 15 })
            .backgroundColor('#EDEDED')
            .onClick(() => {
              console.log(`Clicked Item ${item}`);
            })
            .width('auto'); // 每个子元素占据容器宽度
        })
      }
      .width('100%') // 容器宽度为100%
      .layoutWeight(1); // 容器占据剩余空间的权重
    }
    .backgroundColor($r("app.color.background_color"))
    .width('100%')
    .height('100%')

在这个示例中，我们创建了一个Flex容器，设置direction为FlexDirection.Row表示水平排列，wrap为FlexWrap.Wrap表示允许换行。通过ForEach循环，我们生成了多个Text元素，并设置了每个子元素的宽度为auto，使得他们可以根据名称自适应排列。当子元素的数量增加时，它们会自动换行以适应容器的宽度。

3.4 Flex布局的优势

• 自适应性：Flex布局可以根据容器的大小和子元素的数量自动调整子元素的排列，非常适合处理动态内容。
• 对齐方式：提供多种对齐方式，使得布局更加灵活和美观。
• 简化代码：相比传统的布局方式，Flex布局可以减少嵌套层级，简化代码结构。

4. Scroll组件介绍

Scroll组件用于允许用户通过滚动查看超出容器尺寸的内容。在openHarmony中，Scroll组件非常常用，尤其是在需要展示大量内容或动态内容的场景下。

4.1 Scroll组件的作用

Scroll组件的主要作用是提供一个可滚动的区域，使得用户能够查看超出容器边界的子元素。这对于展示长列表、动态内容或复杂的界面布局非常有用。

4.2 Scroll组件的例子

Scroll(this.scroller) {
  Column() {
    ForEach(this.arr, (item: number, index: number) => {
      Text(`Item ${item}`)
        .margin({ top: 4, left: 2 })
        .fontSize(16)
        .fontColor('#000000')
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.Clip })
        .padding({ left: 10, right: 10, bottom: 5 })
        .borderRadius(5)
        .margin({ top: 7, right: 15 })
        .backgroundColor('#6346853f')
        .onClick(() => {
          console.log(`Clicked Item ${item}`);
        })
        .height(120)
        .width('50%');
    })
  }
  .width('100%')
}
.scrollable(ScrollDirection.Vertical)

5. 在Scroll组件中使用Flex布局

在Scroll组件中嵌套Flex布局可以实现内容的自适应高度和宽度。Flex布局的自适应特性使得内容会根据其内部元素的大小自动调整，非常适合处理动态内容。本部分将详细介绍如何在Scroll组件中使用Flex布局，并确保内容能够根据其长度自动调整高度和宽度。

5.1 嵌套示例

以下是一个具体的示例，展示了如何在Scroll组件中嵌套Flex布局

Scroll(this.scroller) {
  Flex({ wrap: FlexWrap.Wrap, direction: FlexDirection.Row }) {
    ForEach(this.recommendedLocations, (item: routeLocation, index: number) => {
      Column() {
        Row() {
          Text(item.name)
            .margin({ top: 4, left: 2 })
            .fontSize(16)
            .fontColor('#000000')
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Clip }); // 控制文本溢出
          if (index < 3) {
            Image($r("app.media.ic_hot_king"))
              .width(24)
              .height(24)
              .position({ top: -10, right: -20 });
          }
        }
        .padding({ left: 10, right: 10, bottom: 5 })
        .borderRadius(5)
        .margin({ top: 7, right: 15 })
        .backgroundColor(this.selectedLocationIndex === index ? '#EDEDED' : '#EDEDED')
        .onClick(() => {
          console.log(JSON.stringify(item));
          this.selectedLocationIndex = index;
          this.isTrue = false;
          if (this.confirm) {
            this.confirm(item); // 传入的确认回调函数
          }
        })
        .width(item.name.length > 13 ? 'auto' : '90%') // 根据文本长度动态调整宽度
      }
      .alignItems(HorizontalAlign.Start) // 确保整列左对齐
      .width(item.name.length > 13 ? '100%' : '50%'); // 根据文本长度动态调整宽度
    })
  }
  .width('85%') // Flex容器宽度为85%
}
.scrollable(ScrollDirection.Vertical) // 允许垂直滚动
.layoutWeight(1); // Scroll组件占据剩余空间的权重

5.2 代码解释

• Scroll组件
  Scroll(this.scroller)：定义一个可滚动的Scroll组件，并指定滚动控制器为this.scroller。

• Flex容器
  Flex({ wrap: FlexWrap.Wrap, direction: FlexDirection.Row })：定义一个水平排列且允许换行的Flex容器。

• ForEach循环

  ForEach(this.recommendedLocations, (item: routeLocation, index: number) => { … })`：遍历推荐位置数组，并为每个位置创建一个Column组件。

5.3 为什么不需要定义高度

在Scroll组件中使用Flex布局时，不需要为Flex容器定义固定的高度，因为Scroll组件会根据内部内容的大小自动调整其高度。Flex布局的自适应特性使得子元素可以根据容器的大小和内容的数量进行灵活的排列和调整。

5.4 如何实现宽度自适应

Flex布局提供了多种方式来实现子元素宽度的自适应，使得界面可以根据内容的长度进行动态调整。在本示例中，我们通过条件渲染来动态调整Column和Text组件的宽度。使用if (item.name.length > 13)来判断文本长度是否超过13个字符。如果文本长度超过13个字符，则设置Column组件的宽度为’auto’，让其根据内容长度自动调整。否则，设置Column组件的宽度为’50%'，使其在容器内可以两列排列。
展示效果在最前面