Flutter 蒙层控件 ModalBarrier

ModalBarrier 是一个蒙层控件，可以对他后面的 UI 进行遮挡，阻止用户和后面的 UI 发生交互。

ModalBarrier 介绍

在实现上，核心代码是 是一个 ConstrainedBox 包了一个 ColoredBox 。ConstrainedBox 的作用是让 ModalBarrier 拥有允许范围内的最大尺寸。ColoredBox 就是画一个背景色。

ConstrainedBox(

       constraints: const BoxConstraints.expand(),

       child: color == null ? null : ColoredBox(

         color: color!,

       ),

     ),

参数主要有 3 个 color 设置背景色，dismissible 决定点击的时候是否隐藏，onDismiss 是一个回调，当隐藏的时候调用。

使用 ModalBarrier

使用 ModalBarrier 需要 用到 Stack，下面是一个例子。开始的时候 ModalBarrier 不显示，点击按钮的时候，显示 ModalBarrier，过几秒后自动消失。显示 ModalBarrier 的时候，尝试点击按钮，是点不到的，因为已经被 ModalBarrier 遮挡了。

class MyWidget extends StatefulWidget {

  const MyWidget({super.key});


  @override

  State<MyWidget> createState() => _MyWidgetState();

}


class _MyWidgetState extends State<MyWidget> {

  var showBarrier = false;


  @override

  void initState() {

    super.initState();

  }


  @override

  void dispose() {

    super.dispose();

  }


  @override

  Widget build(BuildContext context) {

    return SizedBox(

        width: 300,

        height: 300,

        child: Stack(

          alignment: Alignment.center,

          children: [

            ElevatedButton(

                onPressed: (() async {

                  setState(() {

                    showBarrier = true;

                  });

                  await Future.delayed(Duration(seconds: 5));

                  setState(() {

                    showBarrier = false;

                  });

                }),

                child: Text('显示 barrier')),

            if (showBarrier)

              ModalBarrier(

                color: Colors.black38,

              ),

          ],

        ));

  }

}

在这个例子中，你点遮罩，遮罩 是不消失的。因为让遮罩消失执行的代码是 Navigator.maybePop(context)。我们并没有 push ，所以 pop 也就没有反应了。

一般来说，如果想要全屏遮罩，直接用 Dialog 为好。想部分遮罩，才需要直接用 ModalBarrier，这个时候自己控制显隐。

 if (onDismiss != null) {

          onDismiss!();

        } else {

          Navigator.maybePop(context);

        }

  }

ModalBarrier 源码的逻辑是这样的，所以我们可以添加 onDismiss 回调，在回调函数里隐藏遮罩，这样就不会再走 Navigator.maybePop(context); 了。

ModalBarrier(

    dismissible: true,

    onDismiss: () {

      setState(() {

        showBarrier = false;

      });

    },

    color: Colors.black38,

  );