HarmonyOS鸿蒙Next中一个界面，最外层是Column，高度是100%，它里面有2个东西：上面的，高度用vp已设置，下面的，怎么让它高度充满剩下的空间？

HarmonyOS鸿蒙Next中一个界面，最外层是Column，高度是100%，它里面有2个东西：上面的，高度用vp已设置，下面的，怎么让它高度充满剩下的空间？

build() {
  Column() {

    Row() {}.height(40)
    Column() {} //这个高度怎么充满剩下的空间？

  }.height('100%')
}

谢谢~

5 回复

【解决方案】

build() {
  Column() {
    Row() {
    }.height(40)
    Column() { //这个高度怎么充满剩下的空间？
    }.layoutWeight(1)//layoutWeight属性仅在Row/Column/Flex布局中生效。
  }.height('100%')
}

layoutWeight(value: number | string)：设置组件的布局权重，使组件在父容器（Row/Column/Flex）的主轴方向按照权重分配尺寸。

  • 父容器尺寸确定时，不设置layoutWeight属性或者layoutWeight属性生效值为0的元素优先占位，这些元素占位后在主轴留下的空间称为主轴剩余空间。设置了layoutWeight属性且layoutWeight属性生效值大于0的子元素会从主轴剩余空间中按照各自所设置的权重占比分配尺寸，分配时会忽略元素本身的尺寸设置。
  • 仅在Row/Column/Flex布局中生效。
  • 如果容器中有子元素设置了layoutWeight属性，且设置的属性值大于0，则所有子元素不会再基于flexShrink和flexGrow布局。

更多关于HarmonyOS鸿蒙Next中一个界面，最外层是Column，高度是100%，它里面有2个东西：上面的，高度用vp已设置，下面的，怎么让它高度充满剩下的空间？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


build() {
  Column() {

    Row() {}.height(40)
    Column() {}.layoutWeight(1) // 使用layoutWeight(1) 充满剩下的空间

  }.height('100%')
}

主要是【layoutWeight】；实现子元素尺寸权重的容器layoutWeight如何使用：https://developer.huawei.com/consumer/cn/doc/architecture-guides/tools-v1_2-ts_207-0000002414671885

在Column内，给下面的组件设置layoutWeight(1)即可。该属性会使组件在剩余空间中按权重分配高度，设为1表示占据全部剩余空间。

在HarmonyOS Next中，要让第二个Column组件充满剩余空间，最简洁的方式是使用layoutWeight属性。

将代码修改如下：

build() {
  Column() {
    Row() {}.height(40)
    Column() {}.layoutWeight(1) // 关键：设置权重为1
  }.height('100%')
}

原理说明：

  • 父容器Column设置了固定高度100%。
  • 第一个Row设置了固定高度40vp。
  • 第二个Column设置layoutWeight(1)后，系统会自动计算剩余空间并全部分配给它。

补充说明：

  1. layoutWeight的默认值为0，表示不参与剩余空间分配。
  2. 如果有多个子组件都设置了layoutWeight，剩余空间会按权重比例分配。
  3. 这种方法比手动计算高度更简洁高效，能自动适应不同屏幕尺寸。

这样修改后，第二个Column就能自动填满Column容器中除第一个Row之外的所有空间了。

回到顶部