HarmonyOS 鸿蒙Next Flex组件如何不撑满父容器（当主轴默认不设置时）

Flex组件主轴默认不设置时撑满父容器，Column、Row组件主轴不设置时默认是跟随子节点大小。

[@Preview](/user/Preview)
[@Component](/user/Component)
[@Entry](/user/Entry)
export struct NativeSearch {
  build() {
    Row() {
      Flex({ direction: FlexDirection.Row }) {
        Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
        Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
        Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
      }
      .height(70)
      .width('50%')
      .padding(5)
      .backgroundColor(0xAFEEEE)
    }
  }
}

设置flex的width可以

更多关于HarmonyOS 鸿蒙Next Flex组件如何不撑满父容器（当主轴默认不设置时）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

caililin 2楼•5 个月前

我不是想设置width，我是想让他的宽度，等于子元素的宽度

htzhanglong 3楼•5 个月前

Column的时候，高度等于子元素的高度

nodeper 4楼•5 个月前

在HarmonyOS鸿蒙Next中，当Flex组件的主轴默认不设置时，它通常会撑满父容器。若要让Flex组件不撑满父容器，你可以采取以下几种方法：

设置Flex组件的宽度：直接为Flex组件设置具体的宽度值或使用百分比宽度，但确保该值小于父容器的宽度。
利用flex-grow属性：将Flex组件的flex-grow属性设置为0，这样组件就不会根据可用空间进行拉伸。
使用maxWidth属性：为Flex组件设置maxWidth属性，确保组件的最大宽度不超过某个特定值。
调整父容器的布局：检查父容器的布局设置，确保它没有强制子组件（即Flex组件）撑满整个容器。
检查其他样式属性：确保没有其他样式属性（如padding、margin等）影响Flex组件的最终尺寸。

如果以上方法仍然无法解决问题，可能是由其他布局或样式设置引起的。此时，建议检查相关的布局代码和样式设置，或参考HarmonyOS的官方文档和示例代码。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。