flex 布局,在wrap: FlexWrap.Wrap设置为多行的情况下,alignItems: ItemAlign.Stretch设置就失效了(HarmonyOS 鸿蒙Next)
flex 布局,在wrap: FlexWrap.Wrap设置为多行的情况下,alignItems: ItemAlign.Stretch设置就失效了(HarmonyOS 鸿蒙Next)
flex布局下,想要子组件高度一致,单行情况下可以,但是设置为多行情况下高度不会拉伸至最高的高度
更多关于flex 布局,在wrap: FlexWrap.Wrap设置为多行的情况下,alignItems: ItemAlign.Stretch设置就失效了(HarmonyOS 鸿蒙Next)的实战教程也可以访问 https://www.itying.com/category-93-b0.html
应该是你代码的问题,2楼的答案是正确的,可以参考下2楼
更多关于flex 布局,在wrap: FlexWrap.Wrap设置为多行的情况下,alignItems: ItemAlign.Stretch设置就失效了(HarmonyOS 鸿蒙Next)的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
你是如何实现的,我demo是没问题的,代码如图,效果如图
Flex({ wrap: FlexWrap.Wrap,alignItems: ItemAlign.Stretch }) {
Text('1效的方式对容器中的子元素进行排列、对齐和分配剩余')
.width('50%')
.backgroundColor(0xF5DEB3)
.margin({top:10})
Text('2效的方式对容器中的效的方式对容器中的子元素进行排列、对齐和分配剩余子元素进行排列、对齐和分配剩余效的方式对容器中的子元素进行排列、对齐和分配剩余')
.width('50%')
.backgroundColor(0xD2B48C)
.margin({top:10})
Text('效的方式对容器中的子元素进行排列、对齐和分配剩余3')
.width('50%')
.backgroundColor(0xD2B48C)
.margin({top:10})
Text('1效的方式对容器中的子元素进行排列、对齐和分配剩余')
.width('50%')
.backgroundColor(0xF5DEB3)
.margin({top:10})
Text('2效的方式对容器中的效的方式对容器中的子元素进行排列、对齐和分配剩余子元素进行排列、对齐和分配剩余效的方式对容器中的子元素进行排列、对齐和分配剩余')
.width('50%')
.backgroundColor(0xD2B48C)
.margin({top:10})
Text('效的方式对容器中的子元素进行排列、对齐和分配剩余3')
.width('50%')
.backgroundColor(0xD2B48C)
.margin({top:10})
}
收到。抱拳礼,
如果把子组件的高设置为100%的话就会出现很长的留白
MasterAdvantageContent组件

看截图似乎是固定了宽度,这种情况下可以使用 Grid 来代替 Flex。
如果是没办法使用 Grid 的话,可以考虑一下自定义布局,可以参考官方文档:自定义组件的自定义布局
或者这一篇:链接。
但就我遇到的需求而言,如果是文字内容,一般会要求边框是跟随文字内容,不会留太大的空白
在鸿蒙Next中,当Flex
布局的wrap
属性设置为FlexWrap.Wrap
时,alignItems: ItemAlign.Stretch
确实会失效。这是因为在多行布局中,Stretch
的行为无法像单行布局那样简单地将子项拉伸到容器的高度或宽度。Stretch
的效果依赖于容器和子项在主轴上的总尺寸,而在多行布局中,每一行的子项数量可能不同,导致无法统一拉伸。如果需要实现类似的效果,可以考虑手动设置子项的高度或宽度,或者使用其他布局方式来实现所需的视觉效果。