第二百零四回 模拟对话窗口的页面

文章目录

  • 1. 概念介绍
  • 2. 思路与方法
    • 2.1 实现思路
    • 2.2 实现方法
  • 3. 示例代码
  • 4. 经验分享
  • 5. 内容总结

我们在上一章回中介绍了"修改组件风格的另外一种方法"相关的内容,本章回中将介绍" 如何做一个模拟对话框窗口的页面".闲话休提,让我们一起Talk Flutter吧。

1. 概念介绍

对话框是我们在项目中经常使用的组件,我们在前面章回中也介绍过该组件,本章回中将介绍如何创建一个模拟对话框窗口的页面,页面的外观和真正的对话框完整相同,不同的是这个页面是一直显示的,而不是像对话框一样符合条件时才弹出来。

2. 思路与方法

2.1 实现思路

对话框包含标题,内容和按钮,以及窗口背后的灰色背景。我们先使用一个容器组件充当灰色背景,在该容器中再创建对话框窗口。对话框窗口也可以使用容器组件来实现,只是它的长度和宽度比背景容器的长度和宽度要小一些。

接着在对话框窗口容器中使用Text组件来实现标题和内容,窗口中的按钮使用TextButton组件来实现。然后使用布局类组件把窗口中的标题,内容和按钮组合在一起,组合时可以参考对话框的布局。

2.2 实现方法

有了实现思路后,我们来介绍具体的实现方法:

    1. 使用Container组件来创建对话框的背景,它的大小与屏幕相同,填充颜色为灰色;
    1. 使用Container组件来创建对话框,它的长度和宽度小于背景窗口的长度和宽度;
    1. 在对话框容器中使用Column布局,它把对话框分成三行:标题行,内容行和按钮行;
    1. 使用Text组件来实现标题和内容,标题的文字比内容的文字大一些,通过修改字号来实现;
    1. 使用TextButton来实现对话框中的按钮,按钮有两个,使用Row组件来包含这两个按钮;

除了我们介绍的这些步骤外,还需要给按钮添加点击事件响应的内容,也就是给TextButtononPress属性赋值,不过这个属于业务的内容。大家依据具体的业务给按钮赋值就可以,一定要记得给每个按钮的属性赋值。

3. 示例代码

return Scaffold(///对话框的背景body: Container(color: Colors.black26,width: double.infinity,height: double.infinity,alignment: Alignment.center,///对话框的背景child: Container(width: 272.w,height: 160.w,decoration: BoxDecoration(borderRadius: BorderRadius.circular(12),color: Colors.white,),///三行内容:标题行,内容行,按钮行child: Column(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [///这个空间可以用来存放标题const SizedBox(height: 16,),Text(S.current.btisOffPlsOpenIt),Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [TextButton(onPressed: () {OpenSettings.openBluetoothSetting();},child: Text("Yes",style: const TextStyle(color: Colors.black),),),TextButton(onPressed: () {}, child: Text("No",style: const TextStyle(color: Colors.black),),),],)],),),),
)

上面是的示例完全按照实现方法中的步骤来编写,并且在关键位置添加了代码。编译并且运行上面的代码可以得到下面的运行效果图。

在这里插入图片描述

4. 经验分享

有看官提问说,官方已经提供对话框了,直接拿来使用就可以,为什么要模拟一个对话框?其原因源于我的项目经验,主要有两个,详细如下:

  • 我在项目中使用FlutterBlePlus.turnOn()方法打开手机中的蓝牙开关时会弹出一个对话框窗口,不过无法修改窗口中的提示内容,以及按钮的内容和风格;
  • 在监听蓝牙打开状态的StreamBuilder组件中打开蓝牙时会弹出窗口。但是它会多次弹出窗口,打开蓝牙开关的过对话框提示一次就可以了,弹出多次对话框明显不合理。

鉴于以上两点原因,我们创建模拟对话框的页面,它只显示对话框,但是没有弹出动作,这样就解决了不能修改窗口中的内容以及多次弹出窗口的问题。

5. 内容总结

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

  • 创建模拟对话框的页面只有对话框的外观,没有弹出动作;
  • 对话框的背景和窗口本身通过容器组件实现;
  • 对话框的标题,内容通过Text组件实现;
  • 对话框的按钮通过TextButton实现,依据项目需求添加按钮的点击事件;
  • 模拟对话框的页面是依据项目中特定需求定制的,大家也可以定制自己的页面;

看官们,与"模拟对话窗口的页面"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

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

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

相关文章

群晖(Synology)更换硬盘时间和精神双重折磨的教训

话说玩磁盘阵列的最后结果就是时间上负担不起,并且还被嫌弃。 在磁盘都到位后下一步就是要选择冗余类型了,对大部分人来说使用群晖自己提供的就好了,通常是 SHR。 什么是 SHR Synology Hybrid RAID(SHR)是 Synology…

【C语言程序设计】数组程序设计

目录 前言 一、数组的定义和初始化 二、数组的基本操作 三、数组的高级应用 四、程序设计 4.1 程序设计第一题 4.2 程序设计第二题 4.3 程序设计第三题 总结 🌈嗨!我是Filotimo__🌈。很高兴与大家相识,希望我的博客能对你有所帮助…

vue2 vue-router引入使用详解

vue2 vue-router使用详解 1 介绍2 Vue Router的使用2.1 安装2.2 项目引入使用2.2.1 创建路由文件2.2.2 main.ts 引入2.2.3 App.vue配置2.2.4 整体目录结构 2.4 使用方法2.4.1 使用router-view进行页面视图切换2.4.2 使用router-link进行页面跳转2.4.3 路由重定向2.4.4 路由传参…

Python核心编程之文件和输入输出

目录 一、文件对象 二、 文件内建函数[open()和file()] 1、工厂函数 file() 2、通用换行符支持(UNS)

【什么是POI,为什么它会导致内存溢出?】

什么是POI,为什么它会导致内存溢出 什么是POIExcel并没看到的那么小POI的溢出原理 拓展知识几种Workbook格式 什么是POI Apache POl,是一个非常流行的文档处理工具,通常大家会选择用它来处理Excel文件。但是在实际使用的时候经常会遇到内存溢…

textarea 网页文本框在光标处添加内容

在前端研发中我们经常需要使用脚本在文本框中插入内容。如果产品要求不能直接插入开始或者尾部,而是要插入到光标位置,此时我们就需要获取光标/光标选中的位置。 很多时候,我在格式化文本处需要选择选项,将选择的信息输入到光标位…

html 中vue3 的setup里调用element plus的弹窗 提示

引入Elementplus之后&#xff0c;在setup&#xff08;&#xff09;方法外面导入ElMessageBox const {ElMessageBox} ElementPlus 源码 &#xff1a; <!DOCTYPE html> <html> <head><meta charset"UTF-8"><!-- import Vue before Elemen…

CAN 三: STM32 CAN相关寄存器介绍

1、寄存器列表&#xff08;F1/F4/F7&#xff09; 寄存器名称作用CAN_MCRCAN主控制寄存器主要负责CAN工作模式的配置CAN_BTR位时序寄存器用来设置分频/TBS1/TBS2/TSWJ等参数&#xff0c;设置测试模式CAN_(T/R)IxR标识符寄存器存放(待发送/接收)的报文ID、扩展ID、IDE位及RTR位C…

Linux rm命令教程:如何安全有效地删除文件和目录(附案例详解和注意事项)

Linux rm命令介绍 rm命令在Linux中主要用于删除文件或目录。rm的全称是remove&#xff0c;意为移除。它是Linux用户在使用过程中最常遇到的命令之一。 Linux rm命令适用的Linux版本 rm命令在所有的Linux发行版中都是可用的&#xff0c;包括但不限于Ubuntu, Debian, Fedora, …

SpringBoot之实体参数的详细解析

1.3 实体参数 在使用简单参数做为数据传递方式时&#xff0c;前端传递了多少个请求参数&#xff0c;后端controller方法中的形参就要书写多少个。如果请求参数比较多&#xff0c;通过上述的方式一个参数一个参数的接收&#xff0c;会比较繁琐。 此时&#xff0c;我们可以考虑…

XSS防御:内容安全策略 CSP工作原理、配置技巧与最佳实践

前言 公司部门安全合规改造计划&#xff0c;要求所有的Web站点统一添加CSP规则。对于CSP机制我只是之前在应付面试的时候背过相关的概念&#xff0c;并没有真正在项目中实践过。所以希望借助本次改造任务好好理解并实践CSP机制。 什么是CSP CSP的全称是 Content Security Po…

CCF 202104-2:邻域均值--C++

#include<iostream> #include<bits/stdc.h>using namespace std;int A[601][601]; int n;//长宽都为n个像素double FindNeighborSum(int i,int j,int r,int A[][601]) {int sum0;//像素和 int gs0;//领域 中的像素个数 for(int xi-r;x<ir;x)//找到每一个领域像素…

异步导入中使用SecurityUtils.getSubject().getPrincipal()获取LoginUser对象导致的缓存删除失败问题

结论 SecurityUtils.getSubject().getPrincipal()实际用的也是ThreadLocal&#xff0c;而ThreadLocal和线程绑定&#xff0c;异步会导致存数据丢失&#xff0c;注意&#xff01; 业务背景 最近&#xff0c;系统偶尔会出现excel导入成功&#xff0c;但系统却提示存在进行中的…

数据分析基础之《numpy(3)—基本操作》

一、基本操作 1、adarray.方法() 2、np.函数名() 二、生成数组的方法 1、生成0和1的数组 为什么需要生成0和1的数组&#xff1f; 我们需要占用位置&#xff0c;或者生成一个空的数组 &#xff08;1&#xff09;ones(shape[, dtype, order]) 生成一组1 shape&#xff1a;形…

Ubuntu20.04 Nano编辑器使用指南(Nano vs Vim vs Emacs)

文章目录 Ubuntu 20.04中Nano编辑器的使用指南目录安装Nano打开与关闭NanoNano基础操作向左移动光标向右移动光标向上移动光标向下移动光标删除字符添加字符 在Nano中查找与替换文本文件保存与退出Nano快捷键大全光标移至行首光标移至行尾向上滚动一页向下滚动一页移至文件开始…

NOIP2017提高组day2 - T2:宝藏

题目链接 [NOIP2017 提高组] 宝藏 题目描述 参与考古挖掘的小明得到了一份藏宝图&#xff0c;藏宝图上标出了 n n n 个深埋在地下的宝藏屋&#xff0c; 也给出了这 n n n 个宝藏屋之间可供开发的 m m m 条道路和它们的长度。 小明决心亲自前往挖掘所有宝藏屋中的宝藏。但…

【沐风老师】科研绘图3DMAX病毒建模教程

3dMax在科研绘图方面也有广泛的应用&#xff0c;本教程就给大家讲解病毒的建模方法&#xff0c;下面直接进入教程&#xff1a; 3dMax病毒建模方法&#xff1a; 1.启动3dMax&#xff0c;在视口中创建一个“几何球体”。方法&#xff1a;右边命令面板->创建->几何体->…

mysql 导入时遇到 的解决 Variable ‘time_zone‘ can‘t、‘character_set_client‘问题

mysql在导入文件时&#xff0c;提示如下错误 ERROR 1231 (42000): Variable ‘time_zone‘ can‘t be set to the value of ‘NULL‘ ERROR 1231 (42000): Variable ‘sql_mode‘ can‘t be set to the value of ‘NULL‘ ERROR 1231 (42000): Variable ‘foreign_key_checks‘…

MySQL中EXPLAIN执行计划的分析

一. 执行计划能告诉我们什么&#xff1f; SQL如何使用索引联接查询的执行顺序查询扫描的数据函数 二. 执行计划中的内容 SQL执行计划的输出可能为多行&#xff0c;每一行代表对一个数据库对象的操作 1. ID列 ID列中的如果数据为一组数字&#xff0c;表示执行SELECT语句的顺…

当当狸AR智能学习图集跨越千年文明传承,邀您“面对面”与虚拟诗人互动对诗

中华传统文化底蕴深厚&#xff0c;余韵悠长。即使经过千年的历史裂变&#xff0c;依然历久铭心慰藉着一代又一代人的灵魂。千百年后的今天&#xff0c;成为了我们独一无二的财富。 如今&#xff0c;国人学习中华传统文化的方式有很多&#xff0c;诗词集、动画影片、诗歌传颂等…