文章目录
我们在上一章回中介绍了空类型和空安全相关的内容，本章回中将介绍ModalBarrier组件.闲话休提，让我们一起Talk Flutter吧。
概念介绍
我们在本章回中介绍的ModalBarrier是一种组件，它主要用来当作蒙板覆盖在页面上方,该组件类似Dialog组件，不过它默认情况会覆盖整个页面，因此需要在它外层
嵌套一个容器来控制它的大小。本章回中将详细介绍该组件的使用方法。
使用方法
和其它组件一样，ModalBarrier组件提供了相关的属性来控制自己，下面是常用的属性：
- color属性：主要用来控制组件的背景颜色；
- onDismiss属性：它是方法类型，组件消失时回调此方法；
这两个属性都是可选属性，color属性的默认值是灰色，onDismiss属性的默认值是关闭当前页面。也就是说我们不需要给该组件赋值就可以拿来直接使用。不过我们还
是建议给这两个属性赋值，特别是onDismiss属性。因为它默认会关闭组件所在的页面，而不是像Dialog一样只关闭自己，不影响Dialog所在的页面。此外，最好在
该组件外层嵌套一个容器来控制它的大小，因为它默认覆盖整个页面。我们将在后面的小节中通过示例代码来演示这些内容。
示例代码
SizedBox(
width: 400,
height: 300,
child: ModalBarrier(
///参数onDismiss源代码写的关闭modal窗口
// onDismiss: () => Navigator.maybePop(context),
///自己写的关闭modal窗口,这两种关闭窗口的方法都会退出当前页面
onDismiss: () => Navigator.of(context).pop(),
color: Colors.blue,
),
),
///通过变量控制Modal窗口的显示与隐藏，这样只会关闭Modal窗口，而不会退出当前页面
_showModal
? SizedBox(
width: 300,
height: 400,
child: ModalBarrier(
///点击窗口外的区域无反应，点击窗口内的区域只关闭当前窗口
onDismiss: () {
setState(() {
_showModal = !_showModal;
});
},
color: Colors.green,
),
)
: const SizedBox.shrink(),
上面的代码中我们给ModalBarrier组件外层嵌套了一个SizedBox组件，这样可以控制该组件的大小。此外，我们给onDismiss属性赋了两个不同的值： 一个值参考
源代码实现，主要用来关闭当前页面，另外一个值更新组件状态，主要用来关闭该组件而且不影响组件所在的页面。我在这里就不演示程序的运行结果了，建议大家自己动
手实践，体会一下该组件的功能，特别是onDimiss属性对应的方法。
看官们，关于"ModalBarrier Widget"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!