Harmony 实现双飞翼(圣杯)布局

一行代码实现双飞翼布局

什么是双飞翼(圣杯)

两个盒子中间夹着一个盒子，形状类似一个圣杯效果

layoutWeight属性

借助layoutWeight属性

layoutWeight 效果等效 flex 布局里的 flex： 1

build() {
  Row() {
    Row()
      .width(100)
      .height(100)
      .backgroundColor(Color.Orange)

    Row()
      .width(100)
      .height(100)
      .backgroundColor(Color.Blue)  
      .layoutWeight(1)

    Row()
      .width(100)
      .height(100)
      .backgroundColor(Color.Red)
  }
  .height('100%')
}

Blank标签

借助Blank标签

官网说明

• Blank 效果等效 flex 布局里的 flex： 1
• 空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。
• 仅当父组件为Row/Column/Flex时生效

build() {
  Row() {
    Row()
      .width(100)
      .height(100)
      .backgroundColor(Color.Orange)

    Blank()  

    Row()
      .width(100)
      .height(100)
      .backgroundColor(Color.Red)
  }
}