鸿蒙每日知识分享 - 子组件占满父组件剩余空间

今天是 2025 年 1 月 25 日，今天要分享的鸿蒙知识点是如何让一个子组件占满父组件的剩余空间。

比如我们在移动端经常会这样设计导航栏的搜索框样式：

它的布局就是取消按钮在右边占据固定的大小，而搜索框占据父组件剩余的空间。实现代码如下：

build() {
  Column() {
      Row() {
        Row() {
          Search({ placeholder: "请输入搜索内容" })
            .height(48)
        }
        .margin({ left: 16 })
        .flexShrink(1)

        Text("取消")
          .onClick(() => {
          })
          .margin({ left: 16, right: 16 })
      }
      .width('100%')
  }
  .height('100%')
  .width('100%')
}

实现这一效果的关键代码就是 flexShrink(1)，它会让搜索框占据剩余空间。