第四百三十七回

文章目录

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

4. 内容总结

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/788102.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

简易线程池实现

简易线程池实现 ThreadPool.hpp&#xff08;线程池&#xff09; #ifndef THREADPOOL_HPP #define THREADPOOL_HPP#include <iostream> #include <cstdlib> #include <unistd.h> #include <vector> #include <queue> #include "sem.hpp&qu…

【已解决】java: 无效的目标发行版: 19

问题描述 现在从Spring Boot官网下载的Spring boot文件的诸多配置的版本&#xff0c;无法直接选择和电脑已有配置相匹配的。所以直接下载安装包&#xff0c;并用IDEA打开后无法直接运行。 我在网站上下载的配置如下图&#xff1a; 我遇到的问题是运行时报错java: 无效的目标发…

Flink Checkpoint 状态后端详解:类型、特性对比及场景化选型指南

Apache Flink 提供了多种状态后端以支持 Checkpoint 机制下的状态持久化&#xff0c;确保在故障发生时能够快速恢复状态并实现 Exactly-Once 处理语义。以下是几种常见状态后端的详细介绍及其对比情况&#xff0c;以及不同场景下的选型建议&#xff1a; 1. MemoryStateBackend…

Go项目结构整洁实现|GitHub 3.5k

一、前言 hi&#xff0c;大家好&#xff0c;这里是白泽。今天给大家分享一个GitHub &#x1f31f; 3.5k 的 Go项目&#xff1a;go-backend-clean-arch https://github.com/amitshekhariitbhu/go-backend-clean-architecture 这个项目是一位老外写的&#xff0c;通过一个 HTT…

【QT学习】4.浮动窗口

结果&#xff1a; 代码&#xff1a; //制作核心控件&#xff1a;文本编辑框QTextEdit* pTextEditnew QTextEdit;//制作浮动控件connect(pMenu1,&QMenu::triggered,[](QAction* pAction){qDebug()<<pAction->text()<<endl;if(pAction->text()"浮动…

WebGIS 之 Openlayer

1.导入第三方依赖 <link rel"stylesheet" href"https://lib.baomitu.com/ol3/4.6.5/ol.css"> <script src"https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>2.初始化地图 初始化地图new ol.Map({}) 参数target:制定初始化…

国资委确定首批起航企业,重点布局人工智能、量子信息等新兴领域

国务院国资委近日按照“四新”&#xff08;新赛道、新技术、新平台、新机制&#xff09;标准&#xff0c;遴选确定了首批启航企业&#xff0c;加快新领域新赛道布局、培育发展新质生产力。 据了解&#xff0c;去年以来&#xff0c;国务院国资委围绕加快培育创新型国有企业&…

【华为OD机试C++】求int型正整数在内存中存储时1的个数

《最新华为OD机试题目带答案解析》:最新华为OD机试题目带答案解析,语言包括C、C++、Python、Java、JavaScript等。订阅专栏,获取专栏内所有文章阅读权限,持续同步更新! 文章目录 描述输入描述输出描述示例1示例2代码描述 输入一个 int 型的正整数,计算出该 int 型数据在内…

汉语语音基本特性

发音的生理基础和过程 人的发音生理机构如图 2.3.1所示,发音时由肺部收缩送出一股直流空气,经气管流至喉头声门处(声门即声带开口处),在发声之初,声门处的声带肌肉收缩,声带并拢间隙小于 1mm,这股直流空气冲过很小的缝隙,使声带得到横向和纵向的速度,此时,声带向两边运动,缝隙…

【LeetCode热题100】【链表】K 个一组翻转链表

题目链接&#xff1a;25. K 个一组翻转链表 - 力扣&#xff08;LeetCode&#xff09; 递归迭代&#xff0c;迭代翻转每组的链表节点&#xff0c;递归翻转下一组的链表节点 class Solution { public:ListNode* reverseKGroup(ListNode* head, int k) {ListNode*nextHeadhead; …

事件队列事件循环(EventLoop) 宏任务 微任务详解 面试题

事件队列 事件循环 EventLoop 宏任务 微任务详解 一、概念二、宏任务&#xff08;多个&#xff09;、微任务&#xff08;1个&#xff09;三、Promise 的构造函数四、process.nextTick在事件循环中的处理五、vue nextTick原理 一、概念 event: 事件 loop: 循环&#xff0c;循环…

突破编程_C++_C++14新特性(C++14新特性概览)

1 C14 的发展背景 C14 是 C 编程语言的一个重要版本&#xff0c;它的发展背景紧密关联于C语言的发展历程以及计算机科学领域的整体进步。 首先&#xff0c;C 语言起源于 20 世纪 80 年代早期&#xff0c;它的设计初衷是为了提供一种功能强大、高效且可移植的编程语言&#xf…

系统学习Docker:1_Docker简介以及2_安装Docker

01-Docker简介 什么是Docker 在不同的机器和操作系统中安装运行环境和依赖库是一件很烦人的事情&#xff0c;容器就是为了解决这一问题而出现的技术。 容器是一种虚拟化技术&#xff0c;将应用程序及其依赖项&#xff08;环境、系统工具等&#xff09;打包到一个独立的可移植…

数据结构:链表的双指针技巧

文章目录 一、链表相交问题二、单链表判环问题三、回文链表四、重排链表结点 初学双指针的同学&#xff0c;请先弄懂删除链表的倒数第 N 个结点。 并且在学习这一节时&#xff0c;不要将思维固化&#xff0c;认为只能这样做&#xff0c;这里的做法只是技巧。 一、链表相交问题 …

[Linux]基础IO(中)---理解重定向与系统调用dup2的使用、缓冲区的意义

重定向理解 在Linux下&#xff0c;当打开一个文件时&#xff0c;进程会遍历文件描述符表&#xff0c;找到当前没有被使用的 最小的一个下标&#xff0c;作为新的文件描述符。 代码验证&#xff1a; ①&#xff1a;先关闭下标为0的文件&#xff0c;在打开一个文件&#xff0c;…

图神经网络GNN

图神经网络GNN B、C、D的特征在某种程度上可以代表A的特征 上面就是一次GCN的操作

整型之韵,数之舞:大小端与浮点数的内存之旅

✨✨欢迎&#x1f44d;&#x1f44d;点赞☕️☕️收藏✍✍评论 个人主页&#xff1a;秋邱’博客 所属栏目&#xff1a;人工智能 &#xff08;感谢您的光临&#xff0c;您的光临蓬荜生辉&#xff09; 1.0 整形提升 我们先来看看代码。 int main() {char a 3;char b 127;char …

vue3父子组件之间的传值方式

在vue3中&#xff0c;可以使用props和emit来实现父子组件之间的通信。子组件可以使用emit发出一个事件&#xff0c;父组件监听这个事件&#xff0c;并将数据传递给另一个子组件。 下面的简单例子中&#xff0c;ChildA组件有一个按钮&#xff0c;当按钮被点击时&#xff0c;会触…

WebKit结构简介

WebKit是一款开源的浏览器引擎&#xff0c;用于渲染网页内容。它负责将HTML、CSS和JavaScript等网络资源转换为用户在屏幕上看到的图形界面。WebKit是一个跨平台的引擎&#xff0c;可以在多种操作系统上运行&#xff0c;如Windows、macOS、Linux等。 以下是一篇关于WebKit结构…

信创咨询岗位需求分析

岗位职责 1.深入了解国内IT解决方案市场&#xff0c;熟悉不同领域的国产产品&#xff0c;包括但不限于云计算、大数据、人工智能等。 2.跟踪国内科技发展趋势&#xff0c;了解最新的国产技术和产品&#xff0c;以为客户提供最适合的解决方案。 3.能够撰写清晰、详细的技术文档&…