1# Blank
2
3空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为[Row](ts-container-row.md)/[Column](ts-container-column.md)/[Flex](ts-container-flex.md)时生效。
4
5>  **说明：**
6>
7>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9
10## 子组件
11
12无
13
14
15## 接口
16
17Blank(min?: number | string)
18
19从API version 10开始：  
20 - Blank在父容器[Row](ts-container-row.md)、[Column](ts-container-column.md)、[Flex](ts-container-flex.md)主轴方向上未设置大小时会自动拉伸、压缩，设置了大小或容器自适应子节点大小时不会自动拉伸、压缩。
21 - Blank设置主轴方向大小（size）与min时约束关系为max(min, size)。  
22 - Blank在父容器交叉轴上设置大小时不会撑满父容器交叉轴，交叉轴不设置大小时alignSelf默认值为ItemAlign.Stretch，会撑满容器交叉轴。  
23
24**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
25
26**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用
27
28**系统能力：** SystemCapability.ArkUI.ArkUI.Full
29
30**参数：**
31
32| 参数名 | 类型 | 必填 | 说明 |
33| -------- | -------- | -------- | -------- |
34| min | number&nbsp;\|&nbsp;string | 否 | 空白填充组件在容器主轴上的最小大小。<br/>默认值：0<br/>**说明：** <br/>不支持设置百分比。负值使用默认值。当最小值大于容器可用空间时，使用最小值作为自身大小并超出容器。 |
35
36## 属性
37
38除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
39
40### color
41
42color(value: ResourceColor)
43
44设置空白填充的填充颜色。
45
46**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
47
48**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用
49
50**系统能力：** SystemCapability.ArkUI.ArkUI.Full
51
52**参数：** 
53
54| 参数名 | 类型 | 必填 | 说明 |
55| -------- | -------- | -------- | -------- |
56| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 空白填充的填充颜色。<br/><br/>默认值：Color.Transparent |
57
58## 事件
59
60支持[通用事件](ts-universal-events-click.md)。
61
62## 示例
63
64### 示例1
65Blank组件在横竖屏占满空余空间效果。
66```ts
67// xxx.ets
68@Entry
69@Component
70struct BlankExample {
71  build() {
72    Column() {
73      Row() {
74        Text('Bluetooth').fontSize(18)
75        Blank()
76        Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 })
77      }.width('100%').backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
78    }.backgroundColor(0xEFEFEF).padding(20)
79  }
80}
81```
82
83竖屏状态
84
85![zh-cn_image_0000001219662649](figures/zh-cn_image_0000001219662649.gif)
86
87横屏状态
88
89![zh-cn_image_0000001174104388](figures/zh-cn_image_0000001174104388.gif)
90
91
92### 示例2
93Blank组件的父组件未设置宽度时，min参数的使用效果。
94
95```ts
96// xxx.ets
97@Entry
98@Component
99struct BlankExample {
100  build() {
101    Column({ space: 20 }) {
102      // blank父组件不设置宽度时，Blank失效，可以通过设置min最小宽度填充固定宽度
103      Row() {
104        Text('Bluetooth').fontSize(18)
105        Blank().color(Color.Yellow)
106        Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 })
107      }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
108
109      Row() {
110        Text('Bluetooth').fontSize(18)
111        // 设置最小宽度为160
112        Blank('160').color(Color.Yellow)
113        Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 })
114      }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
115
116    }.backgroundColor(0xEFEFEF).padding(20).width('100%')
117  }
118}
119```
120Blank父组件未设置宽度时，子组件间无空白填充，使用min参数设置填充尺寸
121
122![blankmin](figures/blankmin.png)
123
124