鸿蒙开发：填充剩余空间

大家好，欢迎来到IT知识分享网。

前言

本文基于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("") } .width("100%") .height("100%") .backgroundColor(Color.Orange)

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

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

百分比

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

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

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

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

权重layoutWeight

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

Row() { Column() .width(100) .height("100%") .backgroundColor(Color.Red) Column() { Text("") } .layoutWeight(1) .height("100%") .backgroundColor(Color.Orange) }.width("100%") .height(50)

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

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

Row() { Column() .width(100) .height("100%") .backgroundColor(Color.Red) Column() { Text("") } .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的使用必须父组件的宽高有值，否则就会不生效，当然了，在实际的开发中，还是具体问题具体分析，使用恰当的方式解决为主。