文章目录
- 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组件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!