Flutter 的 showDialog 和 showCupertinoDialog 有什么区别?

embedded/2024/10/19 7:28:55/

在这里插入图片描述
在这里插入图片描述

我将我的 App 里用的 Flutter 升级到了 3.19,没想到,以前我用 showDialog 和 AlertDialog 组合创建的二次确认框,变得无敌难看了,大幅度增加了整个框的圆角和里面默认按钮的圆角。不得已,我必须修改一下,以保持样式的美观。

此前,我使用的 showDialog,里面创建的 AlertDialog,这些默认都是 Material 风格的。不过,我此前试过,在 iOS 上的视觉表现也不错,虽然跟苹果的系统级弹框不太像,但是可以接受。

这次 Flutter 大改,导致这个弹框难看到炸裂,我想到的只能是苹果的换成苹果风格,那样至少看起来不是太奇怪。

然后我发现了有三个函数,showDialog,showCupertinoDialog,showAdaptiveDialog,我首先实验了,仍然使用 showDialog,但是里面 builder 返回的 Widget,我换成了 CupertinoAlertDialog,我发现,竟然毫无违和性。

我不禁好奇,那么 showCupertinoDialog 到底提供了什么独特的功能呢?在 sdk 里还看到了 showAdaptiveDialog,那么这个又是干什么?我发现 showAdaptiveDialog 只是按照 Platform 的取值,自动决定调用 showDialog 和 showCupertinoDialog。

那么问题就来了,showCupertinoDialog 到底有什么独特之处?实测就是大部分是一样的,只是有一些视觉上的细微差异,也有一点交互上的细微差异。如果你不是特别仔细认真的人,可能不会注意到。

不过这种仍然破坏了交互和视觉的一致性,对于设计师来说,往往是很辣眼睛的。

showCupertinoDialog 区别就在于,第一,弹出的模态对话框,其遮罩颜色是比较浅的,不像 Material 风格下,遮罩颜色较深,这个不对比着看,还不容易发现。

第二,弹出的模态框,在 Material 风格下,点击空白区域,可以直接取消掉模态框。但是在 Cupertino 风格下,不允许取消,必须显示点击“取消”按钮。这是交互上的一个小小的差异,不过这是苹果内在交互一致性的体验。

可惜,这些东西,如果你不去查文档,是很难了解到的,就算去查了文档,也不是很容易就掌握到这些差异的,至少我自己是没从文档看出来,而是从网友的分享里看出来的。

下面这种写法是我结合文档和网友的分享推理出来的,实测是没问题的。

void showCustomDialog(BuildContext context) {showAdaptiveDialog(context: context,builder: (BuildContext context) {// 检查运行平台if (Platform.isIOS) {// 使用 CupertinoAlertDialogreturn CupertinoAlertDialog(title: Text("iOS Alert"),content: Text("This is an iOS-style alert dialog."),actions: <Widget>[CupertinoDialogAction(child: Text("Cancel"),onPressed: () => Navigator.of(context).pop(),),CupertinoDialogAction(child: Text("OK"),onPressed: () => Navigator.of(context).pop(),),],);} else {// 使用 AlertDialogreturn AlertDialog(title: Text("Android Alert"),content: Text("This is an Android-style alert dialog."),actions: <Widget>[TextButton(onPressed: () => Navigator.of(context).pop(),child: Text("Cancel"),),TextButton(onPressed: () => Navigator.of(context).pop(),child: Text("OK"),),],);}},);
}

结论

用 showDialog 还是用 showCupertinoDialog 都是可以的。或者图省事,就用 showAdaptiveDialog。在 builder 里,用什么 Dialog 决定了出现后的样式,比如 AlertDialog 和 CupertinoAlertDialog 长得就不一样。不过无论外面用什么函数来调用,里面的都可以随意组合的。只是考虑到系统的交互规范和视觉一致,一般不会混用。

推荐使用 showAdaptiveDialog,里面则根据 Platform.isIOS 等来决定是返回 CupertinoAlertDialog 和是返回 AlertDialog。用错了不会报错的,可以工作,只是丑。


http://www.ppmy.cn/embedded/6106.html

相关文章

持续集成和持续部署

持续集成&#xff08;Continuous Integration&#xff0c;简称CI&#xff09;和持续部署&#xff08;Continuous Deployment&#xff0c;简称CD&#xff09;是现代软件开发中的重要实践&#xff0c;旨在提高开发团队的效率和软件交付的质量。 持续集成是指开发人员将代码频繁地…

【web开发网页制作】html+css家乡长沙旅游网页制作(4页面附源码)

家乡长沙网页制作 涉及知识写在前面一、网页主题二、网页效果Page1、主页Page2、历史长沙Page3、著名人物Page4、留言区 三、网页架构与技术3.1 脑海构思3.2 整体布局3.3 技术说明书 四、网页源码HtmlCSS 五、源码获取5.1 获取方式 作者寄语 涉及知识 家乡长沙网页制作&#x…

IDEA 安装、基本使用、创建项目

文章目录 下载基本使用修改颜色主题Keymap插件 创建项目创建模块新建 Java 类运行新建 Package打包 Jar运行 jar 包 查看文档 下载 官方下载地址&#xff1a;https://www.jetbrains.com/zh-cn/idea/download/?sectionmac 这里我下载 macOS 社区版&#xff0c;IDEA 2024.1 (C…

电磁兼容(EMC):静电放电(ESD)抗扰度试验深度解读(二)

目录 1. 测试方法不同 2. 放电电极不同 3. 模拟的场景不同 4. 试验电压不同 5. 解决方案不同 做产品的硬件设计有没有必要了解静电抗扰度试验测试方法的一些要点&#xff1f;答案是非常有必要。以空气放电与接触放电方法为例&#xff0c;两种测试方法的干扰主要方式不同&a…

学习 Rust 的第六天:所有权问题

大家好&#xff0c; 欢迎来到学习 Rust 的第 6 天&#xff0c;过去 5 天我们学到的内容在几乎每种语言中都是一样的。所有权是 Rust 的一个独特概念。 介绍 所有权是一种独特的内存管理系统&#xff0c;其中每个值都有一个指定的所有者&#xff0c;在所有者超出范围时自动释…

(C语言)sscanf 与 sprintf详解

目录 1.sprintf函数详解 2. sscanf函数详解 1.sprintf函数详解 头文件&#xff1a;stdio.h 作用&#xff1a;将格式化的数据写入字符串里&#xff0c;也就是将格式化的数据转变为字符串。 演示&#xff1a; #include <stdio.h> struct S {char name[10];int height;…

Github 2024-04-17 C开源项目日报Top10

根据Github Trendings的统计,今日(2024-04-17统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量C项目10C++项目2Whisper.cpp: 高性能自动语音识别模型的C/C++移植 创建周期:569 天开发语言:C, C++协议类型:MIT LicenseStar数量:30141 个…

隧道网络对讲广播音频终端-智慧工地网络报警求助箱

隧道网络对讲广播音频终端-智慧工地网络报警求助箱 SV-6007 网络对讲求助终端 一、描述 SV-6007是我司的一款壁挂式双按键求助对讲终端&#xff0c;具有10/100M以太网接口&#xff0c;其接收网络的音频数据&#xff0c;实时解码播放&#xff0c;还配置了麦克风输入和扬声器输…