鸿蒙开发:填充剩余空间

前言

本文基于Api13。

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

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

TypeScript 复制代码
@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组件:

TypeScript 复制代码
 Column(){
          Text("123456789101112131415161718192021222324252627282930")
        }
          .width("100%")
          .height("100%")
          .backgroundColor(Color.Orange)

运行之后,我们看下效果:

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

百分比

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

TypeScript 复制代码
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属性了。

TypeScript 复制代码
Row() {
        Column()
          .width(100)
          .height("100%")
          .backgroundColor(Color.Red)

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

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

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

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

TypeScript 复制代码
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。

TypeScript 复制代码
Row() {
        Text("组件1")
          .height("100%")
          .backgroundColor(Color.Red)

        Blank()
          .color(Color.Orange)

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

运行后看下效果:

相关总结

关于占满剩余的空间,如果权重能够解决,还是以权重为主,因为Blank的使用必须父组件的宽高有值,否则就会不生效,当然了,在实际的开发中,还是具体问题具体分析,使用恰当的方式解决为主。

相关推荐
恋猫de小郭14 分钟前
Flutter 官方 LLM 动态 UI 库 flutter_genui 发布,让 App UI 自己生成 UI
android·前端·flutter
HarmonyOS小助手23 分钟前
【案例+1】HarmonyOS官方模板优秀案例 第7期:金融理财 · 记账应用
harmonyos·鸿蒙·鸿蒙生态
锅拌饭37 分钟前
saveEnabled导致的Fragment大量泄露
android
叽哥1 小时前
Kotlin学习第 3 课:Kotlin 流程控制:掌握逻辑分支与循环的艺术
android·java·kotlin
CYRUS_STUDIO1 小时前
别让 so 裸奔!移植 OLLVM 到 NDK 并集成到 Android Studio
android·android studio·llvm
尚久龙1 小时前
安卓学习 之 图片控件和图片按钮
android·java·学习·手机·android studio·安卓
东风西巷1 小时前
Don‘t Sleep:保持电脑唤醒,确保任务不间断
android·电脑·软件需求
tangweiguo030519871 小时前
FlutterActivity vs FlutterFragmentActivity:全面对比与最佳实践
android·flutter
用户870568130451 小时前
iOS 异步渲染:从 CALayer 切入的实现与优化
ios
葱段2 小时前
【Flutter】TextField 监听长按菜单粘贴点击事件
android·flutter·dart