Flutter 的 showDialog 和 showCupertinoDialog 有什么区别?

news/2024/5/18 16:16:35

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

我将我的 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.mrgr.cn/p/21181312

相关文章

ROM修改进阶教程------安卓7_____安卓13去除签名验证操作步骤解析

同类博文: 安卓玩机搞机技巧综合资源-----修改rom 制作rom 解包rom的一些问题解析【二十一】_qcn改区域锁-CSDN博客 安卓系列机型rom修改。如果你删减了系统相关的app。那么严重会导致开机系统卡米 定屏等问题。这类一般都是系统签名验证导致的。而破解签名验证一般都是修改…

通用目标近似程序的神经加速

通用目标近似程序的神经加速 参考文献链接 https://homes.cs.washington.edu/~luisceze/publications/micro12-web.pdf人工智能芯片与自动驾驶

软文发稿对于企业的重要性

随着社会的发展和科技的进步&#xff0c;软文发稿已成为企业和个人推广和传播信息的一种非常重要的方式。它以隐性的广告形式&#xff0c;通过内容发布&#xff0c;为品牌广告和产品推广铺设了一条隐形高速公路。下面我们就详细解析一下软文发稿的优点和好处。 软文发稿帮助增…

深入探索:Facebook如何重塑社交互动

在当代社会中&#xff0c;社交互动已成为日常生活的核心组成部分。而在众多的社交媒体平台中&#xff0c;Facebook凭借其卓越的用户基础和创新的功能&#xff0c;已经成为了全球最大的社交媒体平台。本文将深入探讨Facebook如何通过其独特的特性和功能&#xff0c;重塑了人们的…

Linux进程详解二:创建、状态、进程排队

文章目录 进程创建进程状态进程排队 进程创建 pid_t fork(void) 创建一个子进程成功将子进程的pid返回给父进程&#xff0c;0返回给新创建的子进程 fork之后有两个执行分支&#xff08;父和子&#xff09;&#xff0c;fork之后代码共享 bash -> 父 -> 子 创建一个进…

mmcv bug记录

图像分类任务要用到mmcv框架&#xff0c;记录遇到的问题 1. Can‘t import build_from_cfg from mmcv. 解决命令&#xff1a;pip install openmim && mim install mmcv-full 2. python分布式训练 解决方案&#xff1a; 租用多张A40卡&#xff0c;执行下述命令&…

Keil MDK6 使用标准库出现 error: no member named IP in NVIC_Type 原因和解决

出现错误: error: no member named IP in NVIC_Type131 | NVIC->IP[NVIC_InitStruct->NVIC_IRQChannel] = tmppriority;| ~~~~ ^时间:2024-4-24 3:05 编辑器: vscode 扩展:Keil Studio Pack (MDK v6)packs:- pack: Keil::STM32F1xx_DFP@2.4.1- pack: ARM::CM…

Git 核心概念与实操

这里写目录标题 1 版本回退2 工作区、暂存区、本地仓库、远程仓库 1 版本回退 原文链接&#xff1a;https://www.liaoxuefeng.com/wiki/896043488029600/897013573512192 首先 git log 查看提交记录 在Git中&#xff0c;用 HEAD 表示当前版本 上一个版本就是 HEAD^ &#xff…

7.2K star!一个完全免费,可以本地部署的 AI 搜索聚合器。新手可尝试

原文链接&#xff1a;7.2K star&#xff01;一个完全免费&#xff0c;可以本地部署的 AI 搜索聚合器。新手可尝试 ChatGPT 刚上线的时候我用的很少&#xff0c;还是习惯用 Google。主要还是因为不信任&#xff0c;怕它对我胡说八道。 慢慢的&#xff0c;也没有一个明确的时间…

js some对比forEach

some&#xff1a;return true可以停止循环 forEach&#xff1a;return true无法停止循环 <!DOCTYPE html> <html ng-app"my_app"><head><script type"text/javascript">const array [10, 20, 30];const targetValue 10;// 检测…

多项式和Bezier曲线拟合

目录 1. 多项式拟合2. Bezier曲线拟合3. 源码地址 1. 多项式拟合 在曲线拟合中&#xff0c;多项式拟合方法的性能受到三个主要因素的影响&#xff1a;采样点个数、多项式阶数和正则项。 采样点个数 N N N&#xff1a;从Figure 1中可以看出较少的采样点个数可能导致过拟合&…

MySQL从入门到高级 --- 2.DDL基本操作

文章目录 第二章&#xff1a;2.基本操作 - DDL2.1 数据库的常用操作创建数据库选择要操作的数据库删除数据库修改数据库编码 2.2 表结构的常用操作创建表格式查看当前数据库的所有表名称查看指定某个表的创建语句查看表结构删除表 2.3 修改表结构添加列修改列名和类型删除列修改…

Docker 基本认识

一 国内&#xff1a; 中国电信天翼云 提供包括云主机在内的全方位云计算服务&#xff0c;侧重于安全合规和企业级服务。 利用电信的网络优势&#xff0c;提供稳定可靠的基础设施服务。 中国联通沃云 提供包括云主机在内的多项云计算服务&#xff0c;适合不同行业和场景。 …

k8s学习(三十六)centos下离线部署kubernetes1.30(单主节点)

文章目录 服务器准备工作一、升级操作系统内核1 查看操作系统和内核版本2 下载内核离线升级包3 升级内核4 确认内核版本 二、修改主机名/hosts文件1 修改主机名2 修改hosts文件 三、关闭防火墙四、关闭SELINUX配置五、时间同步1 下载NTP2 卸载3 安装4 配置4.1 主节点配置4.2 从…

使用Jest测试框架测试JS项目

前言 JavaScript的测试框架有很多&#xff0c;这里主要记录一些自己在初次使用jest时遇到的一些问题。详细使用文档可以参照官方说明文档。 简介 Jest 是一款优雅、简洁的 JavaScript 测试框架。 Jest 支持 Babel、TypeScript、Node、React、Angular、Vue 等诸多框架&#…

Jenkins打包app并通过openssh上传到服务器

目录 1、下载安装openssh 2、配置openssh根目录 3、安装Jenkins Build Steps配置 Post-build Actions配置 4、运行 1、下载安装openssh 网上很多教程&#xff0c;包括开端口的&#xff0c;可以搜下 2、配置openssh根目录 进入C:\ProgramData\ssh打开文件sshd_config&am…

使用docker配置CCM-SLAM

一.Docker环境配置 1.拉取Docker镜像 sudo docker pull ubuntu:18.04拉取的为ununtu18版本镜像&#xff0c;环境十分干净&#xff0c;可以通过以下命令查看容器列表 sudo docker images 如果想删除多余的docker image&#xff0c;可以使用指令 sudo docker rmi -f <id&g…

Oracle数据库的简单使用

Oracle简单使用 一、数据库的介绍二、Oracle介绍账号管理Oracle的安装Oracle服务的作用OracleRemExecService服务创建数据库 常用命令 三、SQL语言SQL分类实用的数据表添加注释数据操纵语言&#xff08;DML&#xff09;查询语句&#xff08;SELECT&#xff09;wherelikedistinc…

Python全栈开发前端与后端的完美融合

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 在当今互联网时代&#xff0c;全栈开发已经成为了一种趋势。全栈开发者具备前端和后端开发的…

使用R语言生成频数分布表

概要 使用R语言生成频数分布表 在R语言中&#xff0c;可以使用freq()函数来生成频数分布表。首先&#xff0c;将需要分组的数据存储在一个向量中。然后&#xff0c;使用freq()函数将这个向量作为参数输入&#xff0c;即可生成频数分布表。以下是一个示例&#xff1a; 示例 …