鸿蒙开发之blank组件

一、使用

使用blank可以在row/column/flex在容器主轴方向上填充剩余部分。

可以通过设置min最小宽度/高度来控制填充的大小，

也可以通过backgroundColor设置背景颜色来改变默认的透明色填充。

//设置最小宽度为200，填充颜色灰色
Blank('200').backgroundColor(Color.Gray)

二、min设置

一共有几种可能

1. 如果我们没有设置父容器的宽度/高度，也没有设置blank的最小宽度，那么blank失效
2. 如果我们没有设置父容器的宽度/高度，设置了blank的最小宽度，那么blank显示最小宽度
3. 如果我们设置父容器的宽度/高度，设置了blank的最小宽度大于父容器剩余宽度，那么blank显示设置的最小宽度，会挤压其他组件
4. 如果我们设置父容器的宽度/高度，设置了blank的最小宽度小于父容器剩余宽度，那么blank不会显示设置的最小宽度，合理的填充剩余空间
5. 如果我们设置父容器的宽度/高度，没有设置blank的最小宽度，那么blank会合理的填充剩余空间

代码如下

@Entry
@Component
struct OfficialBlankPage {

  build() {
      Column({space:40}) {
        Blank()
        Column() {
          Text('父组件没有设置宽度,没设置blank的最小宽度')
          .fontWeight(FontWeight.Bold)
          Row() {
            Button('button1')
              .type(ButtonType.Capsule)
              .backgroundColor(Color.Red)
            Blank().backgroundColor(Color.Gray)
            Button('button2')
              .type(ButtonType.Capsule)
              .backgroundColor(Color.Green)
          }

        }

        Column() {
          Text('父组件没有设置宽度，设置了blank最小宽度')
            .fontWeight(FontWeight.Bold)
          Row() {
            Button('button3')
              .type(ButtonType.Capsule)
              .backgroundColor(Color.Red)
            Blank('80').backgroundColor(Color.Gray)
            Button('button4')
              .type(ButtonType.Capsule)
              .backgroundColor(Color.Green)
          }

        }

        Column() {
          Text('父组件设置了宽度,blank没有设置最小宽度')
            .fontWeight(FontWeight.Bold)
          Row() {
            Button('button5')
              .type(ButtonType.Capsule)
              .backgroundColor(Color.Red)
            Blank().backgroundColor(Color.Gray)
            Button('button6')
              .type(ButtonType.Capsule)
              .backgroundColor(Color.Green)
          }
          .width('100%')
        }


        Column(){
          Text('父组件设置了宽度，blank设置最小宽度大于屏幕剩余宽度')
            .fontWeight(FontWeight.Bold)
          Row() {
            Button('button7')
              .type(ButtonType.Capsule)
              .backgroundColor(Color.Red)
            //设置最小宽度为200
            Blank('200').backgroundColor(Color.Gray)
            Button('button8')
              .type(ButtonType.Capsule)
              .backgroundColor(Color.Green)
          }
          .width('100%')
        }


        Column() {
          Text('父组件设置了宽度，blank设置最小宽度小于屏幕剩余宽度')
            .fontWeight(FontWeight.Bold)
          Row() {
            Button('button9')
              .type(ButtonType.Capsule)
              .backgroundColor(Color.Red)
            //设置最小宽度为150
            Blank('20').backgroundColor(Color.Gray)
            Button('button10')
              .type(ButtonType.Capsule)
              .backgroundColor(Color.Green)
          }
          .width('100%')
        }

        Blank()

      }
      .width('100%')
      .height('100%')
  }
}

效果图如下