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的运行效果:
这个属性有点迷惑，其描述是在未设置尺寸时拉伸到容器尺寸，但是我代码中我明明设置了尺寸。疑惑之
扫描二维码关注公众号，回复：
14763437 查看本文章
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的更多情况说明，可以参考鸿蒙官方文档。