Flutter 的 showDialog 和 showCupertinoDialog 有什么区别?

devtools/2024/11/15 1:00:10/

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

我将我的 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/devtools/6416.html

相关文章

Python 将PDF转为PDF/A和PDF/X,以及PDF/A转回PDF

PDF/A和PDF/X是两种有特定用途的PDF格式&#xff0c;具体查看以下&#xff1a; PDF/A是一种用于长期存档的PDF格式&#xff0c;它旨在确保文档的内容和格式在未来的访问中保持不变。如果您需要对文件进行长期存档&#xff0c;比如法律文件或档案记录&#xff0c;将其转换为PDF…

C# [Flags]属性

在C#中&#xff0c;当你看到[Flags]这个属性被用于枚举&#xff08;enum&#xff09;&#xff0c;它意味着这个枚举设计用来支持位运算&#xff0c;以便可以组合多个枚举值。这通常用于表示可以独立打开或关闭的多个选项或标志。 例如&#xff0c;考虑一个枚举&#xff0c;它代…

Ubuntu 微调训练ChatGLM3大语言模型

Ubuntu 微调训练ChatGLM3大语言模型 LLaMA Factory 的 LoRA 微调提供了 3.7 倍的加速比&#xff0c;同时在广告文案生成任务上取得了更高的 Rouge 分数。结合 4 比特量化技术&#xff0c;LLaMA Factory 的 QLoRA 微调进一步降低了 GPU 显存消耗。 https://github.com/hiyouga…

2233: 【数学】因子游戏

题目描述 桐桐把一个自然数N的正因子个数记为F(N)&#xff0c;例如18的所有正因子为1、2、3、6、9、18&#xff0c;所以F(18)6。现在给出K&#xff0c;桐桐想求出所有满足F(N)K的N中最小的数&#xff0c;你能帮助她吗&#xff1f; 输入 第1行为K&#xff0c;其中0<K<8…

9 个非常流行的Python可视化工具及示例

9 个非常流行的Python可视化工具及应用 1. Matplotlib Matplotlib是一个强大的绘图工具.支持生成各种类型的图表. #示例:绘制简单折线图import matplotlib.pyplot as pltx [1, 2, 3, 4, 5] y [10, 15, 13, 18, 16]plt.plot(x, y) plt.xlabel(X轴) plt.ylabel(Y轴) plt.titl…

李沐45_SSD实现——自学笔记

主体思路&#xff1a; 1.生成一堆锚框 2.根据真实标签为每个锚框打标(类别、偏移、mask) 3.模型为每个锚框做一个预测(类别、偏移) 4.计算上述二者的差异损失&#xff0c;以更新模型weights 先读取一张图像。 它的高度和宽度分别为561和728像素。 %matplotlib inline import …

初识微服务:重塑软件开发的未来

引言 随着信息技术的飞速发展&#xff0c;软件系统的复杂性和规模不断攀升&#xff0c;传统的单体应用架构已经难以满足现代业务的灵活性和可扩展性需求。在这样的背景下&#xff0c;微服务架构应运而生&#xff0c;成为当前软件开发领域的一大热门话题。本文将深入探讨微服务架…

适用于 Windows 的 10 个顶级 PDF 编辑器 [免费和付费]

曾经打开PDF文件&#xff0c;感觉自己被困在数字迷宫中吗&#xff1f;无法编辑的文本、无法调整大小的图像以及签署感觉像是一件苦差事的文档&#xff1f;好吧&#xff0c;不用再担心了&#xff01;本指南解开了在 Windows 上掌握 PDF 的秘密&#xff0c;其中包含 10 款适用于 …