如何使用ModalBarrier组件

文章目录

• 概念介绍
• 使用方法
• 示例代码

概念介绍

我们在本章回中介绍的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"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!