鸿蒙UI开发——组件的可见性控制

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，效果正常显示。