第十一讲_AtkUI弹性布局（Flex）

1. 弹性布局概述

Flex容器组件属于弹性布局，提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。

• 子元素默认沿主轴排列
• 主轴方向默认水平方向且从左到右
• Flex容器组件默认是单行布局

2. 弹性布局的使用

@Entry
@Component
struct FlexLayout {
  build() {
    Flex() {
      Button("第一个按钮")
      Button("第二个按钮")
      Button("第三个按钮")
      Button("第四个按钮")
    }
  }
}

ps：由于Flex容器组件默认是单行的，一行是放不了4个按钮的，所以按钮被压缩放到了一行。

2.1 设置主轴方向

通过direction参数可以设置主轴的方向。

• FlexDirection.Row：主轴为水平方向且从左到右。（默认值）
• FlexDirection.RowReverse：主轴为水平方向且从右到左。
• FlexDirection.Column：主轴为垂直方向且从上到下。
• FlexDirection.ColumnReverse：主轴为垂直方向且从下到上。

@Entry
@Component
struct FlexLayout {
  build() {
    Flex({direction: FlexDirection.RowReverse}) {
      Button("第一个按钮")
      Button("第二个按钮")
      Button("第三个按钮")
      Button("第四个按钮")
    }
  }
}

@Entry
@Component
struct FlexLayout {
  build() {
    Flex({direction: FlexDirection.Column}) {
      Button("第一个按钮")
      Button("第二个按钮")
      Button("第三个按钮")
      Button("第四个按钮")
    }
  }
}

2.2 设置Flex多行布局

通过wrap参数可以设置主轴的方向。

• FlexWrap. NoWrap：单行布局。如果单行放不下子元素，则会压缩子元素。（默认值）
• FlexWrap. Wrap：多行布局，每一行子元素按照主轴方向排列。
• FlexWrap. WrapReverse：多行布局，每一行子元素按照主轴反方向排列。

@Entry
@Component
struct FlexLayout {
  build() {
    Flex({wrap: FlexWrap.Wrap}) {
      Button("第一个按钮")
      Button("第二个按钮")
      Button("第三个按钮")
      Button("第四个按钮")
    }
  }
}

@Entry
@Component
struct FlexLayout {
  build() {
    Flex({wrap: FlexWrap.WrapReverse}) {
      Button("第一个按钮")
      Button("第二个按钮")
      Button("第三个按钮")
      Button("第四个按钮")
    }
  }
}

2.3 设置主轴的对齐方式

通过justifyContent参数设置在主轴方向的对齐方式。

• FlexAlign.Start：子元素在主轴方向首端对齐。（默认值）
• FlexAlign.Center：子元素在主轴方向居中对齐。
• FlexAlign.End：子元素在主轴方向尾部对齐。
• FlexAlign.SpaceBetween：子元素在主轴方向均匀分配。
• FlexAlign.SpaceAround：子元素在主轴方向均匀分配，相邻子元素之间距离相同。第一个子元素到主轴首端的距离和最后一个子元素到主轴尾部的距离是相邻元素之间距离的一半。
• FlexAlign.SpaceEvenly：子元素在主轴方向元素等间距布局，相邻子元素之间的间距、第一个子元素与主轴首端的距离、最后一个子元素到主轴尾部的距离均相等。

@Entry
@Component
struct FlexLayout {
  build() {
    Flex({wrap: FlexWrap.WrapReverse, justifyContent: FlexAlign.SpaceBetween}) {
      Button("第一个按钮")
      Button("第二个按钮")
      Button("第三个按钮")
      Button("第四个按钮")
    }
  }
}

如果之前看过我的另一篇博客ArkUI线性布局（Row/Column），现在理解主轴对齐方式以及参数就很简单，因为它们是类似的。

2.4 设置交叉轴的对齐方式

2.4.1 单行布局的交叉轴的对齐方式

Flex容器组件通过 alignItems 参数设置单行布局中子元素在交叉轴的对齐方式。

• ItemAlign.Auto：使用 Flex 容器中默认配置。
• ItemAlign.Start：交叉轴方向首部对齐。
• ItemAlign.Center：交叉轴方向居中对齐。
• ItemAlign.End：交叉轴方向底部对齐。
• ItemAlign.Stretch：交叉轴方向拉伸填充，拉伸到容器尺寸（前提：子元素没有设置交叉轴方向的长度）。
• ItemAlign.Baseline：交叉轴方向文本基线对齐。

@Entry
@Component
struct FlexLayout {
  build() {
    Flex({alignItems: ItemAlign.Center}) {
      Button("第一个按钮")
      Button("第二个按钮")
      Button("第三个按钮")
      Button("第四个按钮")
    }
    .height(100)
    .backgroundColor(Color.Red)
  }
}

@Entry
@Component
struct FlexLayout {
  build() {
    Flex({alignItems: ItemAlign.Stretch}) {
      Button("第一个按钮")
      Button("第二个按钮")
      Button("第三个按钮")
      Button("第四个按钮")
    }
    .height(100)
    .backgroundColor(Color.Red)
  }
}

2.4.2 多行布局的交叉轴的对齐方式

Flex容器组件通过 alignContent 参数设置子元素各行在交叉轴剩余空间内的对齐方式，只在多行的 Flex 布局中生效。

• FlexAlign.Start：子元素各行与交叉轴起点对齐。
• FlexAlign.Center：子元素各行在交叉轴方向居中对齐。
• FlexAlign.End：子元素各行与交叉轴终点对齐。
• FlexAlign.SpaceBetween：子元素各行与交叉轴两端对齐，各行间垂直间距平均分布。
• FlexAlign.SpaceAround：子元素各行间距相等，是元素首尾行与交叉轴两端距离的两倍。
• FlexAlign.SpaceEvenly: 子元素各行间距、子元素首尾行与交叉轴两端距离都相等。

@Entry
@Component
struct FlexLayout {
  build() {
    Flex({wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceBetween}) {
      Button("第一个按钮")
      Button("第二个按钮")
      Button("第三个按钮")
      Button("第四个按钮")
    }
    .height(200)
    .backgroundColor(Color.Red)
  }
}

@Entry
@Component
struct FlexLayout {
  build() {
    Flex({wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceAround}) {
      Button("第一个按钮")
      Button("第二个按钮")
      Button("第三个按钮")
      Button("第四个按钮")
    }
    .height(200)
    .backgroundColor(Color.Red)
  }
}

@Entry
@Component
struct FlexLayout {
  build() {
    Flex({wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceEvenly}) {
      Button("第一个按钮")
      Button("第二个按钮")
      Button("第三个按钮")
      Button("第四个按钮")
    }
    .height(200)
    .backgroundColor(Color.Red)
  }
}

2.4.3 子元素单独设置交叉轴对齐方式

子元素通过 alignSelf 属性设置自身在父容器交叉轴的对齐方式，且会覆盖 Flex 容器组件中 alignItems 属性配置。

alignSelf 属性和alignSelf 属性的取值范围一样。

ps：多行布局中，alignSelf 属性无效。

@Entry
@Component
struct FlexLayout {
  build() {
    Flex({alignItems: ItemAlign.Center}) {
      Button("第一个按钮")
        .alignSelf(ItemAlign.Stretch)
      Button("第二个按钮")
      Button("第三个按钮")
      Button("第四个按钮")
    }
    .height(200)
    .backgroundColor(Color.Red)
  }
}

2.5 自适应拉伸

在弹性布局Flex尺寸过大或过小，通过子组件flexShrink和flexGrow属性进行缩放，达到自适应布局能力。

• flexGrow：设置“瓜分”父组件的剩余空间的放大比例。
• flexShrink: 当父容器空间不足时，子组件的压缩比例。

弹性布局Flex如何判断其尺寸是否过大或过小？
子组件有个flexBasis属性，用来设置子组件在父容器主轴方向上的基准尺寸。如果设置了该值，则子项占用的空间为设置的值；如果没设置该属性，flexBasis值为width或height的值。Flex组件就是通过累加所有子组件的flexBasis属性值，如果大于Flex组件在主轴方向的尺寸，则过大；反之，则过小。

@Entry
@Component
struct FlexLayout {
  build() {
    Flex() {
      Button("第一个按钮")
        .flexGrow(1)
      Button("第二个按钮")
        .flexGrow(2)
    }
    .height(200)
    .backgroundColor(Color.Red)
  }
}