第一百二十八回 ModalBarrier Widget

最新推荐文章于 2024-10-21 21:15:00 发布

原创最新推荐文章于 2024-10-21 21:15:00 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ModalBarrier组件 #移动开发 #混合开发 #Flutter蒙板

本文介绍了Flutter中的ModalBarrier组件，它用于作为页面蒙板，覆盖整个屏幕。文章详细讲解了组件的用法，包括color和onDismiss属性，以及如何通过代码控制其显示和关闭行为。

文章目录

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

我们在上一章回中介绍了空类型和空安全相关的内容，本章回中将介绍 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(),