Flutter中自定义Dialog

Dialog在不同的平台,都是一种重要的交互方式,在Flutter中,Dialog也是有很多种,但大多数场景的交互,都需要根据项目的主题或一些特定的交互去实现自定义的Dialog。

为满足不同的诉求和兼容性,封装实现了两种不同的Dialog工具,可根据自己的要求,进行填充内容。

一,实现通用的自定义Dialog

根据Dialog的特性,进行抽离封装,具体内容,可自行填充或扩展

  static Future<T?> showCenterDialog<T>(BuildContext context,{bool barrierDismissible = true,required List<Widget> child,EdgeInsetsGeometry ? padding,double? radius}) async{return  await showDialog<T>(context: context,barrierDismissible: barrierDismissible,builder: (BuildContext context) {return WillPopScope(onWillPop: () {return Future.value(barrierDismissible);},child: Scaffold(backgroundColor:Colors.transparent,body: Center(child: SingleChildScrollView(child: Container(margin: const EdgeInsets.symmetric(horizontal: 18),padding: padding,width: double.infinity,decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.all(Radius.circular(radius??0))),child: Column(mainAxisSize: MainAxisSize.min,mainAxisAlignment: MainAxisAlignment.center,children:child,),),),),resizeToAvoidBottomInset: true,),);},);}

使用时:

   showCenterDialog(context, child: [const Text('Hello Word')]);

二,自定义bottomSheet实现高度可定制,内容可扩展的底部弹框

 showBottomSelectDialog(BuildContext context, {required Widget child}) {showModalBottomSheet(context: context,shape: const RoundedRectangleBorder(borderRadius: BorderRadius.only(topLeft: Radius.circular(6), topRight: Radius.circular(6))),isScrollControlled: true,enableDrag: false,constraints: const BoxConstraints(minWidth: 0,minHeight: 0,maxWidth: double.infinity,maxHeight: double.infinity),builder: (context) => child);}

使用时:

showBottomSelectDialog(context, child:Container(height: 300,width: double.infinity,child: const Column(children: [Text('Hello Flutter')],),));

三,自定义Dialog中遇到的问题

在Flutter3.13版本之后,普通Dialog中使用TextField,键盘关闭时,TextField内容会被清空
这是可以把Dialog中的内容放到一个StatefullWidget中,即可解决。

例如:

class WarningPage extends StatefulWidget{final String title;final String message;const WarningPage({super.key,this.title ="Tips",this.message ="Error"});@overrideState<StatefulWidget> createState() {return _WarningState();}
}class _WarningState extends State<WarningPage>{@overrideWidget build(BuildContext context) {return Material(type: MaterialType.transparency, //透明类型child: Center(child: Container(width: double.infinity,margin: const EdgeInsets.symmetric(horizontal: 18),padding: const EdgeInsets.all(10),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(4),),child: Column(mainAxisSize: MainAxisSize.min,mainAxisAlignment: MainAxisAlignment.center,children: [Text(widget.title),Text(widget.message)],),),),);}
}

使用时:

  await showDialog(context: context,barrierDismissible: false,builder: (BuildContext context) {return WillPopScope(onWillPop: () {return Future.value(true);},child: const WarningPage(title: 'App',message: "Hello Flutter"),);},);

如上示例,仅提供了一种通用封装的实现,可结合实际项目自行扩展与实现。

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

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

相关文章

html5cssjs代码 039 元素尺寸

html5&css&js代码 039 元素尺寸 一、代码二、解释 使用CSS来定义HTML元素的尺寸&#xff0c;并通过不同的计量单位来设置元素的大小。 一、代码 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><tit…

从0到1实现RPC | 03 重载方法和参数类型转换

一、存在的问题 1.重载方法在当前的实现中还不支持&#xff0c;调用了会报错。 2.类型转换也还存在问题。 假设定义的接口如下&#xff0c;参数是float类型。 在Provider端接受到的是一个Double类型&#xff0c;这是因为web应用接收的请求后处理的类型。 在反射调用的时候就会…

思腾合力受邀出席文化和旅游虚拟现实应用推广交流活动并作主题演讲

3月21日&#xff0c;由文化和旅游部产业发展司主办&#xff0c;中国信息通信研究院、北京市石景山区文化和旅游局、中国动漫集团有限公司承办的“数字赋能文旅场景建设行动——文化和旅游虚拟现实应用推广交流活动”在北京首钢一高炉SoReal科幻乐园成功举办。 思腾合力CMO徐莉受…

openGauss学习笔记-249 openGauss性能调优-使用Plan Hint进行调优-Join顺序的Hint

文章目录 openGauss学习笔记-249 openGauss性能调优-使用Plan Hint进行调优-Join顺序的Hint249.1 功能描述249.2 语法格式249.3 参数说明249.4 示例 openGauss学习笔记-249 openGauss性能调优-使用Plan Hint进行调优-Join顺序的Hint 249.1 功能描述 指明join的顺序&#xff0…

Flutter Widget:StatefulWidgetStatelessWidgetState

Widget 概念 Widget 将是构建Flutter应用的基石&#xff0c;在Flutter开发中几乎所有的对象都是一个 Widget 。 在Flutter中的widget 不仅表示UI元素&#xff0c;也表示一些功能性的组件&#xff0c;如&#xff1a;手势 、主题Theme 等。而原生开发中的控件通常只是指UI元素。…

JAVA八股文面经问题整理第8弹

文章目录 目录 文章目录 提问问题 问题1 问题2 问题3 问题4 问题5 问题6 问题7 问题8 问题9 问题10 写在最后 提问问题 笔试题&#xff1a;n皇后问题笔试题&#xff1a;求一颗二叉搜索树中的众数TCP与UDP的概念&#xff0c;特点&#xff0c;区别和对应的使⽤场景&#xff1f;H…

DashVector - 阿里云向量检索服务

DashVector 文章目录 DashVector一、关于 DashVector二、使用 DashVector 前提准备1、创建Cluster&#xff1a;2、获得API-KEY3、安装最新版SDK 三、快速使用 DashVector1. 创建Client2. 创建Collection3、插入Doc4、相似性检索5、删除Doc6. 查看Collection统计信息7. 删除Coll…

【阿里云物联网】上报设备数据

前言 MQTT客户端上传数据到阿里云服务端&#xff0c;并且能将数据显示出来。在此之前&#xff0c;我们先要懂得阿里云给设备管理划分的概念。首先是产品&#xff0c;所以在产品里要配置内容&#xff0c;产品下的设备才可以使用&#xff0c;比如主题大类都是在产品里面就可以查…

2024-3-22-Qtday3作业

1> 思维导图 2> 要求&#xff1a; 使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数 将登录按钮使用qt5版本的连接到自定义的槽函数中&#xff0c;在槽函数中判断ui界面上输入的账号是否…

【目标检测】YOLOv9理论解读与代码分析

前言 YOLO这个系列的故事已经很完备了&#xff0c;比如一些Decoupled-Head或者Anchor-Free等大的策略改动已经在YOLOv8固定下来&#xff0c;后面已经估计只有拿一些即插即用的tricks进行小改。 mmdetection框架的作者深度眸也在知乎上对“是否会有YOLOv9”这一观点发表看法&a…

Python爬取歌曲宝音乐:轻松下载Jay的歌

歌曲宝是一个不用付费就能听jay的歌曲&#xff0c;但是每次都只能播放一首不方便&#xff0c;于是今天想把它下载下来&#xff0c;本地循环播放&#xff0c;它所用到的接口是某我的还不错哈 获取搜索接口 分析html请求接口&#xff0c;获取到的数据是直接渲染好的HTML内容&…

苍穹外卖-day02

1. 新增员工 1.1 需求分析和设计 注意事项&#xff1a; 账号必须是唯一的手机号为合法的11位手机号码身份证号为合法的18位身份证号码密码默认为123456 本项目约定&#xff1a; 管理端发出的请求&#xff0c;统一使用**/admin**作为前缀。用户端发出的请求&#xff0c;统一使用…

Redis中的缓存穿透

缓存穿透 缓存穿透是指客户端请求的数据在缓存中和数据库中都不存在&#xff0c;导致这些请求直接到了数据库上&#xff0c;对数据库造成了巨大的压力&#xff0c;可能造成数据库宕机。 常见的解决方案&#xff1a; 1&#xff09;缓存无效 key 如果缓存和数据库中都查不到某…

Dell戴尔XPS 12 9250二合一笔记本电脑原装出厂Windows10系统包下载

链接&#xff1a;https://pan.baidu.com/s/1rqUEM_q5DznF0om6eevcwg?pwdvij0 提取码&#xff1a;vij0 戴尔原厂WIN10系统自带所有驱动、出厂主题壁纸、系统属性专属联机支持标志、系统属性专属LOGO标志、Office办公软件、MyDell等预装程序 文件格式&#xff1a;esd/wim/sw…

Xilinx FPGA 远程升级时bin和bit文件使用注意

以Spartan-6 ISE开发环境为例。 ISE开发环境支持生成bit和bin格式的程序文件&#xff0c;可以在生成选项进行配置&#xff1a; 把生成的bit文件和bin文件进行二进制比较&#xff0c;发现bit比bin文件头部多了一些内容&#xff08;头部信息&#xff09;&#xff0c;剩余部分完…

Microsoft Edge 中的 Internet Explorer 模式解决ie禁止跳转到edge问题

作为网工&#xff0c;网络中存在很老的设备只能用ie浏览器访问打开&#xff0c;但是win10后打开Internet Explorer 会强制跳转到Edge 浏览器&#xff0c;且有人反馈不会关&#xff0c;为此找到了微软官方的Microsoft Edge 中的 Internet Explorer 模式&#xff0c;可以直接在Mi…

qt 程序 打包 批处理方式

如果可执行程序包含很多自己写的dll&#xff0c;用cmd 方式 使用 windeployqt 绝对路径打包时比较慢&#xff0c;下面介绍通过bat批处理的方式&#xff0c;将打包命令写在文件中&#xff0c;执行bat文件即可&#xff0c;具体步骤如下&#xff1a; 1.复制 将要打包的a1.dll 等…

网络工程师练习题6

网络工程师 综合题 计算并填写下表&#xff1a; TP地址191.23.181.13子网掩码255.255.192.0地址类型 &#xff08;1&#xff09;网络地址&#xff08;2&#xff09;直接广播地址&#xff08;3&#xff09;主机号&#xff08;4&#xff09;子网内的最后一个可用IP地址&#xf…

【使用redisson完成延迟队列的功能】使用redisson配合线程池完成异步执行功能,延迟队列和不需要延迟的队列

1. 使用redisson完成延迟队列的功能 引入依赖 spring-boot-starter-actuator是Spring Boot提供的一个用于监控和管理应用程序的模块 用于查看应用程序的健康状况、审计信息、指标和其他有用的信息。这些端点可以帮助你监控应用程序的运行状态、性能指标和健康状况。 已经有了…

vue请求后端接口提示:CORS header miss ‘Access-Control-Allow-Origin’

原因分析&#xff1a; url请求中协议、域名、端口中只要有任意一个与当前url不相同&#xff0c;及出现跨域。 解决方案&#xff1a; JSONP (利用<script>标签的跨域能力) 例如&#xff1a; <img src"图片url地址" alt"" /> <script src&q…