第四百三十七回

1. 概念介绍

我们在这里说的蒙板层是在正常的页面上显示一个蒙板，相当于给页面加了一层毛玻璃，进而达到模糊显示的效果,除了模糊显示外还可以阻止页面响应点击事件，因为任
何的点击事件都被蒙板响应了，位于蒙板下的正常页面无法接收到点击事件。本章回中将介绍如何实现这样的蒙板。

2. 思路与方法

2.1 实现思路

考虑了蒙板的功能后，我们决定使用stack组件来管理页面，底层显示正常的页面，上层显示蒙板页面。正常情况下显示正常的页面，符合一定条件时显示蒙板页面。这个
便是我们实现蒙板的整体思路。

2.2 实现方法

有了思路后，我们就可以实现蒙板了，下面是详细的实现方法；

• 使用Scaffold组件创建一个页面布局；
• 创建一个Stack组件对象，并且把它赋值给Scaffold的body属性；
• 创建一个正常的页面组件，把它放在Stack组件的底层；
• 创建一个蒙板页面组件，把它放在Stack组件的上层；
• 给蒙板页面添加条件，只有满足特定条件时才显示蒙板，否则显示空组件；

3. 示例代码

bool isShowOverlay = false;

Scaffold(
 appBar: AppBar(
   title: const Text("Example of Scaffold Overlay"),
   backgroundColor: Colors.purpleAccent,
   ///这个值默认为true,如果设置为false就会隐藏返回箭头
   automaticallyImplyLeading: true,
   ///该属性和extendBodyBehindAppBar属性同时设置为true时才可以让body部分的内容覆盖到AppBar上面
   ///此时就会显示蒙板，不过它不会覆盖AppBar中的返回箭头和Title
   forceMaterialTransparency: true,
 ),
  extendBodyBehindAppBar: true,
  body: Stack(
    children: [
    ///正常页面
      Positioned(
        left: 0,
        top: 200,
        child: Column(
          children: [
            const Text("This is body"),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  isShowOverlay = true;
                });
              },
              child: const Text("show overlay"),
            ),
          ],
        ),
      ),
      ///蒙板页面
      Positioned(
        top: 0,
        left: 0,
        width: screenWidth,
        height: screenHeight,
        child: isShowOverlay ? Container(
          color: Colors.black26,
          alignment: Alignment.center,
          child:  const Text("This is overlay"),
        )
        : const SizedBox.shrink(),
      ),
    ],
  ),
);

上面的示例代码完全按照实现方法中的步骤实现，我们还在关键的地方添加了注释，这样有助于大家理解代码。编译并且运行上面的程序，可以看到一个正常的页面，页面
顶部是标题栏，页面中间是一行文字和一个按钮，点击按钮后页面被蒙板覆盖，蒙板中心位置显示"This is overly"文字，刚才的按钮无法响应点击事件。我在这里
就不演示程序的运行效果了，建议大家亲自动手去体验一下。此外，我们分享一些细节问题。我们需要配置Scaffold的extendBodyBehindAppBar属性和AppBar中
的forceMaterialTransparency属性，这样才能让蒙板覆盖到AppBar，否则蒙板只能覆盖AppBar以外的页面。AppBar被覆盖后还剩下导航图标(返回箭头)和标题
没有被覆盖。这个不好理解，我们给AppBar配置背景色后就能清楚的看到。比如上面的代码中导航图标和标题都是默认的黑色，AppBar的背景颜色是紫色，蒙板的颜色
是浅黑色。没有显示蒙板时可以看到黑色的标题和紫色的背景，显示蒙板后只能看到黑色的标题和浅黑色的蒙板。其实我们可以把它们理解是三个图层组成的立体页面，
黑色的标题位于最上层，中间是蒙板层，下层是紫色的AppBar。没有蒙板时可以看到两层，有了蒙板后紫色的AppBar被蒙板覆盖，无法被我们看到。在AppBar中还有
一个叫automaticallyImplyLeading的属性，它的默认值为true,表示可以显示导航图标，如果把该属性的值设置为false，那么在显示蒙板时导航图标会被蒙板
覆盖，此时，我们只能看到标题。有看官说：如何才能让蒙板把标题也覆盖掉呢？目前我们还没有找到好的方法，不过可以把标题的颜色修改成和蒙板一样的颜色，这样看上去就和被蒙板覆盖一样。不过我们不推荐这样做，毕竟这种方法属于鱼目混珠，没有从根本上解决问题。

4. 内容总结

最后，我们对本章回的内容做一个全面的总结：

• 可以使用Stack组件配合Scaffold组件创建一个可以显示蒙板的页面；
• 显示蒙板时最好把AppBar也覆盖掉，只留下标题和导航图标；
• 是否显示蒙板需要指定一个条件，只有满足特定条件时才可以显示蒙板；
  看官们，与"如何在页面上显示蒙板层"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!