文章目录
- 1. 概念介绍
- 2. 思路与方法
- 2.1 实现思路
- 2.2 实现方法
- 3. 示例代码
- 4. 内容总结
我们在上一章回中介绍了"不同平台上换行的问题"相关的内容，本章回中将介绍如何在页面上显示蒙板层.闲话休提，让我们一起Talk Flutter吧。
1. 概念介绍
我们在这里说的蒙板层是在正常的页面上显示一个蒙板，相当于给页面加了一层毛玻璃，进而达到模糊显示的效果,除了模糊显示外还可以阻止页面响应点击事件，因为任
何的点击事件都被蒙板响应了，位于蒙板下的正常页面无法接收到点击事件。本章回中将介绍如何实现这样的蒙板。
2. 思路与方法
2.1 实现思路
考虑了蒙板的功能后，我们决定使用stack组件来管理页面，底层显示正常的页面，上层显示蒙板页面。正常情况下显示正常的页面，符合一定条件时显示蒙板页面。这个
便是我们实现蒙板的整体思路。
2.2 实现方法
有了思路后，我们就可以实现蒙板了，下面是详细的实现方法；
- 使用Scaffold组件创建一个页面布局；
- 创建一个Stac组件对象，并且把它赋值给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也覆盖掉，只留下标题和导航图标；
- 是否显示蒙板需要指定一个条件，只有满足特定条件时才可以显示蒙板；
看官们，与"如何在页面上显示蒙板层"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!
