• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 显隐控制
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @jiangtao92-->
5<!--Designer: @piggyguy-->
6<!--Tester: @songyanhong-->
7<!--Adviser: @HelloCrease-->
8
9控制组件是否可见。
10
11>  **说明：**
12>
13> 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
14
15## visibility
16
17visibility(value: Visibility): T
18
19控制组件的显示或隐藏。当未设置visibility时，组件默认为显示。
20
21**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
22
23**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
24
25**系统能力：** SystemCapability.ArkUI.ArkUI.Full
26
27**参数：**
28
29| 参数名 | 类型                                          | 必填 | 说明                                                         |
30| ------ | --------------------------------------------- | ---- | ------------------------------------------------------------ |
31| value  | [Visibility](ts-appendix-enums.md#visibility) | 是   | 控制当前组件显示或隐藏。根据具体场景需要可使用[条件渲染](../../../ui/state-management/arkts-rendering-control-ifelse.md)代替。 |
32
33**返回值：**
34
35| 类型 | 说明 |
36| -------- | -------- |
37| T | 返回当前组件。 |
38
39
40## 示例
41
42 该示例通过配置visibility的不同值，实现不同的显隐控制效果。
43
44```ts
45// xxx.ets
46@Entry
47@Component
48struct VisibilityExample {
49  build() {
50    Column() {
51      Column() {
52        // 隐藏不参与占位
53        Text('None').fontSize(9).width('90%').fontColor(0xCCCCCC)
54        Row().visibility(Visibility.None).width('90%').height(80).backgroundColor(0xAFEEEE)
55
56        // 隐藏参与占位
57        Text('Hidden').fontSize(9).width('90%').fontColor(0xCCCCCC)
58        Row().visibility(Visibility.Hidden).width('90%').height(80).backgroundColor(0xAFEEEE)
59
60        // 正常显示，组件默认的显示模式
61        Text('Visible').fontSize(9).width('90%').fontColor(0xCCCCCC)
62        Row().visibility(Visibility.Visible).width('90%').height(80).backgroundColor(0xAFEEEE)
63      }.width('90%').border({ width: 1 })
64    }.width('100%').margin({ top: 5 })
65  }
66}
67```
68
69![visibility.png](figures/visibility.png)
70