第九节HarmonyOS 常用基础组件16-Blank

1、描述

空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column/Flex时生效。

2、接口

Blank(min?: number | string)

3、参数

参数名	参数类型	必填	描述
min	number|string	否	空白填充组件在容器主轴上的最小大小。默认值：0。说明：不支持百分比。负值时使用默认值，当最小值大于容器可用空间时，使用最小值作为自身大小并超出容器。

4、属性

color - ResourceColor - 设置空白填充的填充颜色。默认值：Color.Transparent

5、示例

import router from '@ohos.router'

@Entry
@Component
struct BlankPage {
  @State message: string = '空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column/Flex时生效。'

  build() {
    Row() {
      Scroll() {
        Column() {
          Text(this.message)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .width('96%')

          Blank(12)
          Row() {
            Text('Bluetooth').fontSize(18)
            Blank().color(Color.Gray)
            Toggle({ type: ToggleType.Switch })
          }
          .width('96%')
          .backgroundColor(0xFFFFFF)
          .border({ width: 2, color: Color.Red, radius: 15, style: BorderStyle.Solid })
          .borderRadius(15)
          .padding({ left: 12 })

          Blank(12)
          Column() {
            Text('Text1').fontSize(18).padding(12).backgroundColor(Color.Green)
            Blank().color(Color.Gray)
            Text('Text2').fontSize(18).padding(12).backgroundColor(Color.Green)
          }
          .width("96%")
          .height(200)
          .backgroundColor(Color.Yellow)
          .borderRadius(15)

          Blank(12)
          Button("Blank文本文档")
            .fontSize(20)
            .backgroundColor('#007DFF')
            .width('96%')
            .onClick(() => {
              // 处理点击事件逻辑
              router.pushUrl({
                url: "pages/baseComponent/blank/BlankDesc",
              })
            })
          Blank(12)

        }
        .width('100%')
      }
    }
    .padding({ top: 12, bottom: 12 })
  }
}

7、效果图