本文主要是介绍第四百三十六回,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
文章目录
- 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中的返回箭头和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,那么在显示蒙板时导航图标会被蒙板
覆盖,此时,我们只能看到标题。有看官说:如何才能让蒙板把标题也覆盖掉呢?目前我们还没有找到好的方法,不过可以把标题的颜色修改成和蒙板一样的颜色,这样看
上去就和被蒙板覆盖一样。不过我们不推荐这些做,毕竟这种方法属于鱼目混珠,没有从根本上解决问题。
4. 内容总结
最后,我们对本章回的内容做一个全面的总结:
- 可以使用Stack组件配合Scaffold组件创建一个可以显示蒙板的页面;
- 显示蒙板时最好把AppBar也覆盖掉,只留下标题和导航图标;
- 是否显示蒙板需要指定一个条件,只有满足特定条件时才可以显示蒙板;
看官们,与"如何在页面上显示蒙板层"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!
这篇关于第四百三十六回的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!