当前位置：首页 > news >正文

第四百三十八回

news 2025/9/11 1:04:21

文章目录

1. 概念介绍
2. 思路与方法
- 2.1 实现思路
- 2.2 实现方法
3. 示例代码
4. 内容总结

们在上一章回中介绍了"不同平台上换行的问题"相关的内容，本章回中将介绍如何在页面上显示蒙板层.闲话休提，让我们一起Talk Flutter吧。

在这里插入图片描述

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中的返回箭头和TitleforceMaterialTransparency: 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，那么在显示蒙板时导航图标会被蒙板
覆盖，此时，我们只能看到标题。有看官说：如何才能让蒙板把标题也覆盖掉呢？目前我们还没有找到好的方法，不过可以把标题的颜色修改成和蒙板一样的颜色，这样看
上去就和被蒙板覆盖一样。不过我们不推荐这样做，毕竟这种方法属于鱼目混珠，没有从根本上解决问题。