鸿蒙开发：填充剩余空间

前言本文基于Api13。有两个组件，暂且不论横向纵向，后一个组件需要占满剩下的空间，该如何绘制呢？肯定有的人都会想起，给后一个组件设置宽度为100%，不就可以了吗？来，我们验证一下，例举一个很简单的案例，使用Row组件，设置两个测试组件，前一个组件宽度为100，后一个宽度设置为100%。 @Entry @Component struct DemoPage { build() { Column() { Row() { Column() .width(100) .height("100%") .backgroundColor(Color.Red) Column() .width("100%") .height("100%") .backgroundColor(Color.Orange) }.width("100%") .height(50) } .height('100%') .width('100%') } } 运行之后，我们看下效果，还别说，后一个组件还真沾满了剩余的空间。但是，以上的真的是正确的吗？我们在组件中填充上内容，再次观察一下，随便填充一个组件就可以，这里我用了一个Text组件： Column(){ Text("123456789101112131415161718192021222324252627282930") } .width("100%") .height("100%") .backgroundColor(Color.Orange) 运行之后，我们看下效果：想必大家已经看到问题了，如果说后一个组件占满了剩余的空间，文字展示应该在屏幕最后边时进行换行，但偏偏，内容已经超出了屏幕一些后，才进行了换行，也就是说后一个组件其实远远不是剩余空间的宽度，而是整个屏幕的宽度。百分比所以，直接给后一个组件设置为100%是不对的，正确的做法是，两个组件都设置百分比，比如给前一个设置20%，后一个设置80%。 Row() { Column() .width("20%") .height("100%") .backgroundColor(Color.Red) Column(){ Text("123456789101112131415161718192021222324252627282930") } .width("80%") .height("100%") .backgroundColor(Color.Orange) }.width("100%") .height(50) 运行之后，可以发现，后一个组件确实占满了剩余的空间。但是问题又来了，我前一个组件如果不是百分比啊，就是固定的宽度，后一个组件如何设置呢？权重layoutWeight 显然在实际的开发中，前一个固定宽度或者高度的组件大有存在，如何让后一个组件占满剩余的空间，那就需要权重layoutWeight属性了。 Row() { Column() .width(100) .height("100%") .backgroundColor(Color.Red) Column() { Text("123456789101112131415161718192021222324252627282930") } .layoutWeight(1) .height("100%") .backgroundColor(Color.Orange) }.width("100%") .height(50) 可以看到后一个组件完美的占满了剩余的空间。如果是左右固定，中间的组件占满剩余的空间呢？权重属性依然可以解决。 Row() { Column() .width(100) .height("100%") .backgroundColor(Color.Red) Column() { Text("1234567891011121314151617181920") } .layoutWeight(1) .height("100%") .backgroundColor(Color.Orange) Column() .width(100) .height("100%") .backgroundColor(Color.Red) }.width("100%") .height(50) 空白填充Blank 权重是可以解决剩余空间问题，但是有的需求是，两个组件一个居左，一个居右，中间是空白区域，如何摆放组件呢？这种情况可以使用RelativeContainer组件，让子组件相对父容器居左居右即可。当然了，还有一种方式，那就是空白填充组件Blank。 Row() { Text("组件1") .height("100%") .backgroundColor(Color.Red) Blank() .color(Color.Orange) Text("组件2") .height("100%") .backgroundColor(Color.Red) }.width("100%") .height(50) 运行后看下效果：相关总结关于占满剩余的空间，如果权重能够解决，还是以权重为主，因为Blank的使用必须父组件的宽高有值，否则就会不生效，当然了，在实际的开发中，还是具体问题具体分析，使用恰当的方式解决为主。

Mar 22, 2025 - 04:40

前言

本文基于Api13。

有两个组件，暂且不论横向纵向，后一个组件需要占满剩下的空间，该如何绘制呢？

肯定有的人都会想起，给后一个组件设置宽度为100%，不就可以了吗？来，我们验证一下，例举一个很简单的案例，使用Row组件，设置两个测试组件，前一个组件宽度为100，后一个宽度设置为100%。

@Entry
@Component
struct DemoPage {
  build() {
    Column() {
      Row() {
        Column()
          .width(100)
          .height("100%")
          .backgroundColor(Color.Red)
        Column()
          .width("100%")
          .height("100%")
          .backgroundColor(Color.Orange)
      }.width("100%")
      .height(50)
    }
    .height('100%')
    .width('100%')
  }
}

运行之后，我们看下效果，还别说，后一个组件还真沾满了剩余的空间。

但是，以上的真的是正确的吗？我们在组件中填充上内容，再次观察一下，随便填充一个组件就可以，这里我用了一个Text组件：

 Column(){
          Text("123456789101112131415161718192021222324252627282930")
        }
          .width("100%")
          .height("100%")
          .backgroundColor(Color.Orange)

运行之后，我们看下效果：

想必大家已经看到问题了，如果说后一个组件占满了剩余的空间，文字展示应该在屏幕最后边时进行换行，但偏偏，内容已经超出了屏幕一些后，才进行了换行，也就是说后一个组件其实远远不是剩余空间的宽度，而是整个屏幕的宽度。

百分比

所以，直接给后一个组件设置为100%是不对的，正确的做法是，两个组件都设置百分比，比如给前一个设置20%，后一个设置80%。

Row() {
        Column()
          .width("20%")
          .height("100%")
          .backgroundColor(Color.Red)
        Column(){
          Text("123456789101112131415161718192021222324252627282930")
        }
          .width("80%")
          .height("100%")
          .backgroundColor(Color.Orange)
      }.width("100%")
      .height(50)

运行之后，可以发现，后一个组件确实占满了剩余的空间。

但是问题又来了，我前一个组件如果不是百分比啊，就是固定的宽度，后一个组件如何设置呢？

权重layoutWeight

显然在实际的开发中，前一个固定宽度或者高度的组件大有存在，如何让后一个组件占满剩余的空间，那就需要权重layoutWeight属性了。

Row() {
        Column()
          .width(100)
          .height("100%")
          .backgroundColor(Color.Red)

        Column() {
          Text("123456789101112131415161718192021222324252627282930")
        }
        .layoutWeight(1)
        .height("100%")
        .backgroundColor(Color.Orange)

      }.width("100%")
      .height(50)

可以看到后一个组件完美的占满了剩余的空间。

如果是左右固定，中间的组件占满剩余的空间呢？权重属性依然可以解决。

Row() {
        Column()
          .width(100)
          .height("100%")
          .backgroundColor(Color.Red)

        Column() {
          Text("1234567891011121314151617181920")
        }
        .layoutWeight(1)
        .height("100%")
        .backgroundColor(Color.Orange)

        Column()
          .width(100)
          .height("100%")
          .backgroundColor(Color.Red)
      }.width("100%")
      .height(50)

空白填充Blank

权重是可以解决剩余空间问题，但是有的需求是，两个组件一个居左，一个居右，中间是空白区域，如何摆放组件呢？

这种情况可以使用RelativeContainer组件，让子组件相对父容器居左居右即可。

当然了，还有一种方式，那就是空白填充组件Blank。

Row() {
        Text("组件1")
          .height("100%")
          .backgroundColor(Color.Red)

        Blank()
          .color(Color.Orange)

        Text("组件2")
          .height("100%")
          .backgroundColor(Color.Red)
      }.width("100%")
      .height(50)

运行后看下效果：