HarmonyOS鸿蒙学习笔记（11）Flex组件alignItems属性说明

1、代码示例

Flex弹性布局组件。本文通过一个例子代码来验证Flex的alignItems属性。

@Entry
@Component
struct Index {
  build() {

    Column() {
      Flex({ alignItems:ItemAlign.Stretch,direction:FlexDirection.Row}) {
        Text('1').textAlign(TextAlign.Center).width('20%').height(50).backgroundColor(0xF5DEB3)
        Text('2').textAlign(TextAlign.Center).width('20%').height(100).backgroundColor(0xD2B48C)
        Text('3').textAlign(TextAlign.Center).width('20%').height(150).backgroundColor(0xF5DEB3)
        Text('4').textAlign(TextAlign.Center).width('20%').height(200).backgroundColor(0xD2B48C)
        Text('5').textAlign(TextAlign.Center).width('20%').height(250).backgroundColor(0xF5DEB3)
      }
      .height(300)
      .width('100%')
      .backgroundColor(0xAFEEEE)
    }.justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .height('100%')
    .width('100%')
  }
}

如上面不如所示，Flex里面有五个宽度一样高度不同的的Text文本控件.ItemAlign属性控制着子组件在Flex容器交叉轴上的对齐格式，ItemAlign的值类型如下

2、FlexDirection.Row情况下各个ItemAlign的运行情况。

默认情况下Flex的direction属性值为FlexDirection.Row

2.1、alignItems:ItemAlign.Auto的运行效果

2.2、alignItems:ItemAlign.Baseline的运行效果:

这个暂时没有看明白布局原理，后面再验证之。

2.3、alignItems:ItemAlign.Center的运行效果:

2.4、alignItems:ItemAlign.End的运行效果:

2.5、alignItems:ItemAlign.Start的运行效果:

这个跟Auto运行效果一样。

2.6、alignItems:ItemAlign.Stretch的运行效果:

这个属性有点迷惑，其描述是在未设置尺寸时拉伸到容器尺寸，但是我代码中我明明设置了尺寸。疑惑之

3、FlexDirection.Column情况下各个ItemAlign的运行情况。

在这里为了方便说明，我们将代码改动下，将Text的高度设置一样，宽度设置不同，代码改动如下：

    Column() {
      Flex({ alignItems:ItemAlign.Stretch,direction:FlexDirection.Column}) {
        Text('1').textAlign(TextAlign.Center).width(50).height('20%').backgroundColor(0xF5DEB3)
        Text('2').textAlign(TextAlign.Center).width(100).height('20%').backgroundColor(0xD2B48C)
        Text('3').textAlign(TextAlign.Center).width(150).height('20%').backgroundColor(0xF5DEB3)
        Text('4').textAlign(TextAlign.Center).width(200).height('20%').backgroundColor(0xD2B48C)
        Text('5').textAlign(TextAlign.Center).width(250).height('20%').backgroundColor(0xF5DEB3)
      }
      .height(300)
      .width('100%')
      .backgroundColor(0xAFEEEE)
    }.justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .height('100%')
    .width('100%')

3.1、alignItems:ItemAlign.Stretch的运行效果:

3.2、alignItems:ItemAlign.Start的运行效果:

3.3、alignItems:ItemAlign.End的运行效果:

3.4、alignItems:ItemAlign.Center的运行效果:

3.5、alignItems:ItemAlign.Auto的运行效果:

另外FlexDirection还有两种类型RowReverse和ColumnReverse：其中RowReverse跟Row方向相反；ColumnReverse与Column方向相反，在这里就不在赘述，读者可以执行验证之。 关于Flex的更多情况说明，可以参考鸿蒙官方文档。

参考资料： Flex官方文档 FlexDirdection官方文档 ItemAlign属性说明