个人电脑做网站主机,国内做网站的企业,网络营销策划案ppt,广州市网站建设公司文章目录 1. 概念介绍2. 思路与方法2.1 实现思路2.2 实现方法 3. 示例代码4. 内容总结 我们在上一章回中介绍了不同平台上换行的问题相关的内容#xff0c;本章回中将介绍如何在页面上显示蒙板层.闲话休提#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍
我… 文章目录 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也覆盖掉只留下标题和导航图标是否显示蒙板需要指定一个条件只有满足特定条件时才可以显示蒙板 看官们与如何在页面上显示蒙板层相关的内容就介绍到这里欢迎大家在评论区交流与讨论!
