HarmonyOS鸿蒙Next中Blank空白组件如何使用？弹性布局占位指南

1. 基础用法 - 两端对齐

arkts

@Entry
@Component
struct BasicBlankDemo {
  build() {
    Column({ space: 16 }) {
      // 左右两端对齐
      Row() {
        Text('标题')
          .fontSize(16)
          .fontColor($r('app.color.text_primary'))
        Blank()  // 填充中间空白
        Text('查看更多')
          .fontSize(14)
          .fontColor($r('app.color.primary'))
      }
      .width('100%')
      .padding(16)
      .backgroundColor($r('app.color.surface'))
      .borderRadius(12)
    }
    .padding(16)
  }
}

2. 列表项布局

arkts

@Entry
@Component
struct ListItemBlankDemo {
  build() {
    Column() {
      Row() {
        // 左侧图标
        Image($r('app.media.ic_fish'))
          .width(40)
          .height(40)
          .borderRadius(20)

        // 中间内容
        Column() {
          Text('孔雀鱼')
            .fontSize(16)
            .fontColor($r('app.color.text_primary'))
          Text('小型热带鱼')
            .fontSize(12)
            .fontColor($r('app.color.text_secondary'))
            .margin({ top: 4 })
        }
        .alignItems(HorizontalAlign.Start)
        .margin({ left: 12 })

        Blank()  // 推开右侧内容

        // 右侧箭头
        Image($r('app.media.ic_arrow_right'))
          .width(20)
          .height(20)
          .fillColor($r('app.color.text_secondary'))
      }
      .width('100%')
      .padding(16)
      .backgroundColor($r('app.color.surface'))
      .borderRadius(12)
    }
    .padding(16)
  }
}

3. 设置项开关

arkts

@Entry
@Component
struct SettingItemDemo {
  @State isEnabled: boolean = true

  build() {
    Column() {
      Row() {
        Column() {
          Text('推送通知')
            .fontSize(16)
            .fontColor($r('app.color.text_primary'))
          Text('接收提醒和消息推送')
            .fontSize(12)
            .fontColor($r('app.color.text_secondary'))
            .margin({ top: 4 })
        }
        .alignItems(HorizontalAlign.Start)

        Blank()

        Toggle({ type: ToggleType.Switch, isOn: this.isEnabled })
          .selectedColor($r('app.color.primary'))
          .onChange((isOn: boolean) => {
            this.isEnabled = isOn
          })
      }
      .width('100%')
      .padding(16)
      .backgroundColor($r('app.color.surface'))
      .borderRadius(12)
    }
    .padding(16)
  }
}

4. 带最小宽度的Blank

arkts

@Entry
@Component
struct MinBlankDemo {
  build() {
    Column({ space: 16 }) {
      // 设置最小宽度
      Row() {
        Text('很长的标题文本内容')
          .fontSize(16)
        Blank().min(16)  // 最小16px间距
        Text('操作')
          .fontSize(14)
          .fontColor($r('app.color.primary'))
      }
      .width('100%')
      .padding(16)
      .backgroundColor($r('app.color.surface'))
      .borderRadius(12)
    }
    .padding(16)
  }
}

5. 底部按钮布局

arkts

@Entry
@Component
struct BottomButtonDemo {
  build() {
    Column() {
      // 内容区域
      Column() {
        Text('页面内容')
      }
      .layoutWeight(1)

      Blank()  // 将按钮推到底部

      // 底部按钮
      Row({ space: 12 }) {
        Button('取消')
          .layoutWeight(1)
          .height(48)
          .backgroundColor($r('app.color.surface'))
          .fontColor($r('app.color.text_primary'))

        Button('确认')
          .layoutWeight(1)
          .height(48)
          .backgroundColor($r('app.color.primary'))
          .fontColor(Color.White)
      }
      .width('100%')
      .padding(16)
    }
    .width('100%')
    .height('100%')
  }
}

6. 卡片头部布局

arkts

@Entry
@Component
struct CardHeaderDemo {
  build() {
    Column() {
      // 卡片头部
      Row() {
        Row({ space: 8 }) {
          Image($r('app.media.ic_aquarium'))
            .width(24)
            .height(24)
            .fillColor($r('app.color.primary'))
          Text('我的鱼缸')
            .fontSize(16)
            .fontWeight(FontWeight.Bold)
            .fontColor($r('app.color.text_primary'))
        }

        Blank()

        Text('3个')
          .fontSize(14)
          .fontColor($r('app.color.text_secondary'))
      }
      .width('100%')
      .padding(16)

      Divider().color($r('app.color.divider'))

      // 卡片内容
      Column() {
        Text('卡片内容区域')
      }
      .padding(16)
    }
    .backgroundColor($r('app.color.surface'))
    .borderRadius(16)
    .margin(16)
  }
}

7. Blank vs layoutWeight

arkts

// Blank - 自动填充
Row() {
  Text('左')
  Blank()
  Text('右')
}

// layoutWeight - 按比例
Row() {
  Text('左').layoutWeight(1)
  Text('中').layoutWeight(2)
  Text('右').layoutWeight(1)
}