鸿蒙API14开发【Blank】ArkTS组件
Blank组件是ArkUI中的空白填充组件,主要用于在Row/Column/Flex容器的主轴方向上自动填充剩余空间。该组件从API 7开始支持,后续版本增加了大小约束、交叉轴对齐等功能。主要特性包括:可通过min参数设置最小尺寸;在未设置容器主轴尺寸时自动伸缩;支持设置填充颜色。典型应用场景包括布局对齐、元素间隔控制等,适用于横竖屏适配需求。示例展示了Blank在占满剩余空间和填充固定宽度两种场
空白填充组件,在容器主轴方向上,空白填充组件具有自动填充容器空余部分的能力。仅当父组件为[Row]/[Column]/[Flex]时生效。
说明:
该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
子组件
无
接口
Blank(min?: number | string)
从API version 10开始:
- Blank在父容器[Row]、[Column]、[Flex]主轴方向上未设置大小时会自动拉伸、压缩,设置了大小或容器自适应子节点大小时不会自动拉伸、压缩。
- Blank设置主轴方向大小(size)与min时约束关系为max(min, size)。
- Blank在父容器交叉轴上设置大小时不会撑满父容器交叉轴,交叉轴不设置大小时alignSelf默认值为ItemAlign.Stretch,会撑满容器交叉轴。
卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。
原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| min | number | string | 否 |
属性
除支持[通用属性]外,还支持以下属性:
color
color(value: ResourceColor)
设置空白填充的填充颜色。
卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。
原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | [ResourceColor] | 是 | 空白填充的填充颜色。 默认值:Color.Transparent |
事件
示例
示例1(占满空余空间)
Blank组件在横竖屏占满空余空间效果。
// xxx.ets
@Entry
@Component
struct BlankExample {
build() {
Column() {
Row() {
Text('Bluetooth').fontSize(18)
Blank()
Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 })
}.width('100%').backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
}.backgroundColor(0xEFEFEF).padding(20)
}
}
ts
竖屏状态

横屏状态

示例2(填充固定宽度)
Blank组件的父组件未设置宽度时,min参数的使用效果。
// xxx.ets
@Entry
@Component
struct BlankExample {
build() {
Column({ space: 20 }) {
// blank父组件不设置宽度时,Blank失效,可以通过设置min最小宽度填充固定宽度
Row() {
Text('Bluetooth').fontSize(18)
Blank().color(Color.Yellow)
Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 })
}.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
Row() {
Text('Bluetooth').fontSize(18)
// 设置最小宽度为160
Blank('160').color(Color.Yellow)
Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 })
}.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
}.backgroundColor(0xEFEFEF).padding(20).width('100%')
}
}
ts
Blank父组件未设置宽度时,子组件间无空白填充,使用min参数设置填充尺寸


更多推荐

所有评论(0)