文章目录
- 1. 概念介绍
- 2 使用方法
- 3 示例代码
我们在上一章回中介绍了ModalBarrier组件相关的内容，本章回中将介绍Visibility组件.闲话休提，让我们一起Talk Flutter吧。
1. 概念介绍
我们在本章回中介绍的Visibility组件是一种容器类组件，主要用来显示和隐藏容器中的其它组件。在Android和IOS平台上如果想显示或者隐藏某个组件的话，只需要
修改当前组件的visibility属性就可以。在Flutter中，大部分组件没有类似的属性，如果我们想动态地显示或者隐藏某个组件，那么可以把该组件当作Visibility
组件的子组件，然后通过Visibility组件来显示或者隐藏组件。如何显示和隐藏组件呢？看官莫急，我们稍后就会介绍。
2 使用方法
和其它组件类似Visibility组件提供了相关的属性来控制自己，下面是常用的属性：
- child属性：主要是存放其它组件；
- visible属性：主要用来控制child中组件的可见性；
- replacement属性：主要用来控制child中组件不可见时容器中的组件；
上面介绍的这三个属性中只有child属性是必选属性，其它属性都是可选属性。当visible属性的值为true时显示child属性对应的组件，否则显示replacement属
性对应的组件，该属性的默认值是SizedBox.shrink(),该值表示一个自动缩放的空组件。我们对Visibility组件显示和隐藏其它组件的过程做一个总结：该组件
包含两个组件，其中一个是空组件，然后通过visible属性来决定显示哪个组件，当显示空组件时就相当于隐藏了另外一个组件。
3 示例代码
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组件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!
