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

郭梧悠

已于 2022-09-20 20:05:51 修改

阅读量2.4k

点赞数

分类专栏： HarmonyOS之ArkUI 文章标签： harmonyos

于 2022-09-20 19:52:56 首次发布

本文链接：https://blog.csdn.net/chunqiuwei/article/details/126941099

版权

HarmonyOS之ArkUI 专栏收录该内容

74 篇文章

订阅专栏

本文通过代码示例详细解析了Flex布局中alignItems属性的作用，并展示了在不同FlexDirection设置下各ItemAlign值的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flex组件alignItems属性

1、代码示例
2、FlexDirection.Row情况下各个ItemAlign的运行情况。
3、FlexDirection.Column情况下各个ItemAlign的运行情况。

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的更多情况说明，可以参考鸿蒙官方文档。