鸿蒙入门07-Blank组件

最新推荐文章于 2024-04-30 21:34:55 发布

进阶H5小白

最新推荐文章于 2024-04-30 21:34:55 发布

阅读量367

点赞数 9

文章标签： harmonyos 华为前端鸿蒙

本文链接：https://blog.csdn.net/qq_42660453/article/details/137930455

版权

空白填充组件

在容器 主轴方向 上

空白填充组件具有自动填充空余部分的能力

注意：仅在父组件为 Row 或者 Column 的时候有效

注意：不能使用通用属性修饰

参数

参数名	参数类型	是否必填	默认值	参数描述
min	number ｜ string	否	0	空白填充组件的最小填充尺寸

示例 1

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 没有使用 Blank 组件
      Row() {
        Text('左').fontSize(30)
        Text('右').fontSize(30)
      }.width('100%').height(50)

      Divider().height(50)

      // 使用 Blank 组件
      Row() {
        Text('左').fontSize(30)
        Blank()
        Text('右').fontSize(30)
      }.width('100%').height(50)
    }
  }
}

示例 2

@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Text('左').fontSize(30)
        Blank()
        Text('右').fontSize(30)
      }.width('100%').height(50)

      Divider().height(50)

      Row() {
        Text('左').fontSize(30)
        Blank()
        Text('中').fontSize(30)
        Blank()
        Text('右').fontSize(30)
      }.width('100%').height(50)
    }
  }
}

示例 3

设置 Blank 组件的参数为 200

不管剩余空白有多少，我最少填充 200 的尺寸

@Entry
  @Component
  struct Index {
    build() {
      Column() {
        Row() {
          Text('左').fontSize(30)
          Blank()
          Text('右').fontSize(30)
        }.width('100%').height(50)

        Divider().height(50)

        Row() {
          Text('左').fontSize(30)
          Blank(200)
          Text('中').fontSize(30)
          Blank(200)
          Text('右').fontSize(30)
        }.width('100%').height(50)
      }
    }
  }

示例 4

还可以通过 color 方法来修饰填充部分的颜色

@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Text('左').fontSize(30)
        Blank().color(Color.Pink)
        Text('右').fontSize(30)
      }.width('100%').height(50)

      Divider().height(50)

      Row() {
        Text('左').fontSize(30)
        Blank(200).color(Color.Orange)
        Text('中').fontSize(30)
        Blank(200).color(Color.Gray)
        Text('右').fontSize(30)
      }.width('100%').height(50)
    }
  }
}