1、概 述
我们在UI开发中不可避免会遇到组件的显示和隐藏状态的切换，为了高效地控制组件的显示状态，ArkTs提供了visibility属性。接下来对visibility做简单介绍。
2、使用介绍
visibility接口定义如下：
控制当前组件显示或隐藏。根据具体场景需要可使用条件渲染代替。默认值：Visibility.Visible
// 控制组件的显隐。visibility(value: Visibility)
Visibility是一个枚举，定义如下：
Hidden // 隐藏，但参与布局进行占位。Visible // 显示。None // 隐藏，但不参与布局，不进行占位。
其中，Hidden与None需要注意；
-
当Visibility属性为Hidden时：展示效果可以类比为组件变成了全透明，即：占用的位置与空间都保留，只是组件看不见。
-
当Visibility属性为None时：展示效果可以类比为组件完全不存在，即：完全不在界面中，不占空间也不占位置。
| 有前端开发经验的朋友来看。 属性值为Hidden时，显示效果与css样式设置visibility: hidden一致； 属性值为None时，显示效果与css样式display: none一致； |
Hidden与None在性能上的区别：
-
Visibility为
None的重排代价相对较高。因为当一个元素的属性改变为none或者从none变为其他值时，渲染过程需要重新计算界面中其他元素的位置和大小，这个过程可能会比较复杂（特别是在复杂的页面布局中） -
而
Visibility:Hidden只会引起重绘，因为元素的位置和大小没有改变，只是它的可见性发生了变化。重绘的性能开销相对重排要小一些。
👉🏻 demo
示例效果如下：
代码如下（10、14、18行代码）：
// xxx.ets@Entry@Componentstruct VisibilityExample {build() {Column() {Column() {// 隐藏不参与占位Text('None').fontSize(9).width('90%').fontColor(0xCCCCCC)Row().visibility(Visibility.None).width('90%').height(80).backgroundColor(0xAFEEEE)// 隐藏参与占位Text('Hidden').fontSize(9).width('90%').fontColor(0xCCCCCC)Row().visibility(Visibility.Hidden).width('90%').height(80).backgroundColor(0xAFEEEE)// 正常显示，组件默认的显示模式Text('Visible').fontSize(9).width('90%').fontColor(0xCCCCCC)Row().visibility(Visibility.Visible).width('90%').height(80).backgroundColor(0xAFEEEE)}.width('90%').border({ width: 1 })}.width('100%').margin({ top: 5 })}}
从效果中我们看到：
-
第10行代码中将Visibility设置为None，Row在界面中没有占据任何空间。（底部Hidden与None紧挨着，中间没有Row的空隙）
-
第14行代码中，将Visibility设置为Hidden，Row在界面中没有显示出来，但高度所占的空间是保留了下来。
-
第18行代码中，Visibility设置为Visible，效果正常显示。