介绍
空白填充组件,在容器主轴方向上,空白填充组件具有自动填充容器空余部分的能力。仅当父组件为 Row、Column、Flex 时生效。
Blank在父容器Row、Column、Flex主轴方向上未设置大小时会自动拉伸、压缩,设置了大小或容器自适应子节点大小时不会自动拉伸、压缩。Blank设置主轴方向大小(size)与min时约束关系为max(min, size)。Blank在父容器交叉轴上设置大小时不会撑满父容器交叉轴,交叉轴不设置大小时alignSelf默认值为ItemAlign.Stretch,会撑满容器交叉轴。
注意
要有 空余空间 才能生效,即:可能需要设置 宽度、高度 100%
接口
Blank(min?: number | string)
参数:
- min:
number、string,空白填充组件在容器主轴上的最小大小。默认值:0,不支持设置百分比。
属性
设置空白填充的填充颜色。
color(value: ResourceColor)
参数:
- value:
ResourceColor类型,必填,空白填充的填充颜色。默认值:Color.Transparent
例子
如下图:使用空白填充组件,占满 Row 布局的空余空间,将开关按钮挤到最右侧
// xxx.ets
@Entry
@Component
struct BlankExample {
build() {
Column() {
Row() {
Text('Bluetooth')
.fontSize(18)
Blank() // 占满空余空间,将开关按钮挤到最右侧,有空余空间才生效,所以需要设置Row的宽度 100%
Toggle({
type: ToggleType.Switch
}).
margin({
top: 14,
bottom: 14,
left: 6,
right: 6
})
}
.width('100%') // 有空余空间,Blank() 占满空余空间 才生效
.backgroundColor(0xFFFFFF)
.borderRadius(15)
.padding({
left: 12
})
}
.backgroundColor(0xEFEFEF)
.padding(20)
}
}
