HarmonyOS 鸿蒙Next flex 布局中，如何实现 子元素将 剩余的空间填满，类似前端的flex:auto ?

发布于 1周前 作者 htzhanglong 来自 鸿蒙OS

HarmonyOS 鸿蒙Next flex 布局中，如何实现 子元素将 剩余的空间填满，类似前端的flex:auto ?

如题：flex 布局中，如何实现 子元素将 剩余的空间填满，类似前端的flex:auto ?

Harmonyos Next教程
3 回复
采用Flex布局中的layoutWeight属性设置，父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，表示自适应占满剩余空间。

更多关于HarmonyOS 鸿蒙Next flex 布局中，如何实现 子元素将 剩余的空间填满，类似前端的flex:auto ?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


用layoutWeight，他这种写法，估计跟Android学的。

在HarmonyOS鸿蒙Next flex布局中，要实现子元素将剩余空间填满，类似于前端的flex: auto，可以通过设置子元素的flex-grow属性来实现。

具体来说，你需要在XML布局文件中，为希望填满剩余空间的子元素设置ohos:flex-grow属性，并将其值设为1。这样，当父容器有剩余空间时，该子元素会根据flex-grow的值按比例分配剩余空间。

例如：

<DirectionalLayout
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:orientation="horizontal">

    <Component
        ohos:width="200vp"
        ohos:height="match_parent"/>

    <Component
        ohos:width="0vp"
        ohos:height="match_parent"
        ohos:flex-grow="1"/>
</DirectionalLayout>

在这个例子中，第一个子元素固定宽度为200vp，第二个子元素宽度设为0vp，并设置了ohos:flex-grow="1"，这样第二个子元素就会填满父容器剩余的空间。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部