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

7 回复

应该是你代码的问题,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组件

![cke_464.png](https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtybbs/839/956/367/0010086000839956367.20250308002842.27787357142342178000516672565732:50001231000000:2800:580E0C0E1A8760D0A696129E2D17FAAB76EF0656DA139BE3B4CF95E8633EE96A.png)

看截图似乎是固定了宽度,这种情况下可以使用 Grid 来代替 Flex。

如果是没办法使用 Grid 的话,可以考虑一下自定义布局,可以参考官方文档:自定义组件的自定义布局

或者这一篇:链接

但就我遇到的需求而言,如果是文字内容,一般会要求边框是跟随文字内容,不会留太大的空白

在鸿蒙Next中,当Flex布局的wrap属性设置为FlexWrap.Wrap时,alignItems: ItemAlign.Stretch确实会失效。这是因为在多行布局中,Stretch的行为无法像单行布局那样简单地将子项拉伸到容器的高度或宽度。Stretch的效果依赖于容器和子项在主轴上的总尺寸,而在多行布局中,每一行的子项数量可能不同,导致无法统一拉伸。如果需要实现类似的效果,可以考虑手动设置子项的高度或宽度,或者使用其他布局方式来实现所需的视觉效果。

回到顶部