鸿蒙中 空白填充组件Blank

本文同步发表于我的微信公众号，微信搜索 程语新视界 即可关注，每个工作日都有文章更新

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

一、基础使用

1. 基本创建

@Entry
@Component
struct BasicBlank {
  build() {
    Column() {
      Text('顶部文本')
      Blank()  // 默认占位
      Text('底部文本')
    }
    .width('100%')
    .height('100%')
  }
}

特性：

• 默认最小尺寸为0
• 在Flex布局中具有弹性伸缩能力

二、尺寸控制API

1. 固定尺寸设置

API	参数类型	说明	版本支持
width	Length	设置宽度	API 7+
height	Length	设置高度	API 7+
size	{ width: Length, height: Length }	同时设置宽高	API 9+

Blank()
  .width(20)  // 固定宽度20vp
  .height('10%')  // 高度父容器10%
  
// 或使用size简写
Blank()
  .size({ width: 20, height: 40 })

2. 弹性布局中的表现

Row() {
  Text('左').fontSize(20)
  Blank()  // 自动填充剩余空间
  Text('右').fontSize(20)
}
.width('80%')

注意：在Row/Column中会默认扩展填充可用空间

三、高级布局控制

1. 最大最小尺寸限制

Blank()
  .width(100)
  .minWidth(50)  // 最小宽度限制
  .maxWidth(200)  // 最大宽度限制

2. 百分比尺寸

Column() {
  Blank()
    .height('30%')  // 父容器高度的30%
  
  Text('内容区域')
}
.height(300)

四、样式与装饰

1. 背景与边框（API 9+）

Blank()
  .backgroundColor('#F5F5F5')  // 设置背景色
  .border({ width: 1, color: '#DDDDDD' })  // 边框
  .borderRadius(4)  // 圆角

2. 透明度控制

Blank()
  .opacity(0.5)  // 半透明效果

五、交互增强

1. 点击事件支持

Blank()
  .onClick(() => {
    console.log('空白区域点击');
  })
  .backgroundColor('#0000000A')  // 添加轻微背景便于识别

六、与其它组件对比

特性	Blank	Divider	Column/Row的space参数
主要用途	弹性占位	分割线	均匀间隔
可点击	支持	支持	不支持
样式定制	丰富	有限	无
布局控制	精确	固定	均匀
版本支持	API 7+	API 7+	API 7+