第一百二十九回 Visibility组件

我们在上一章回中介绍了ModalBarrier组件相关的内容，本章回中将介绍Visibility组件.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在本章回中介绍的Visibility组件是一种容器类组件，主要用来显示和隐藏容器中的其它组件。在Android和IOS平台上如果想显示或者隐藏某个组件的话，只需要修改当前组件的visibility属性就可以。在Flutter中，大部分组件没有类似的属性，如果我们想动态地显示或者隐藏某个组件，那么可以把该组件当作Visibility组件的子组件，然后通过Visibility组件来显示或者隐藏组件。如何显示和隐藏组件呢？看官莫急，我们稍后就会介绍。

使用方法

和其它组件类似Visibility组件提供了相关的属性来控制自己，下面是常用的属性：

• child属性：主要是存放其它组件；
• visible属性：主要用来控制child中组件的可见性；
• replacement属性：主要用来控制child中组件不可见时容器中的组件；

上面介绍的这三个属性中只有child属性是必选属性，其它属性都是可选属性。当visible属性的值为true时显示child属性对应的组件，否则显示replacement属性对应的组件，该属性的默认值是SizedBox.shrink(),该值表示一个自动缩放的空组件。

我们对Visibility组件显示和隐藏其它组件的过程做一个总结：

该组件包含两个组件，其中一个是空组件，然后通过visible属性来决定显示哪个组件，当显示空组件时就相当于隐藏了另外一个组件。

示例代码

Visibility(
  visible: _showModal,
  child: SizedBox(
    height: 200,
    width: 300,
    child: ModalBarrier(
      color: Colors.yellow,
      onDismiss: () {
        setState(() {
          _showModal = !_showModal;
        });
      },
    ),
  ),
),

上面的代码中，我们在Visibility组件中包含了一个ModalBarrier组件，在该组件的onDismiss属性中动态修改Visibility组件的visible属性，这样可以实现隐藏ModalBarrier组件的功能。

这个示例代码和上一章回中隐藏ModalBarrier组件的示例代码在原理上相同：如果符合某种条件则显示ModalBarrier组件，否则显示空组件。这个条件在上一章回的示例代码中是自己定义的变量，在本章回的示例代码中是Visibility组件的visible属性。

看官们，与"Visibility组件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!