SwiftUI 新 Alert 弹出窗口圆你文本输入之梦

news/2024/7/7 20:54:43

在这里插入图片描述

概览

小伙伴们都知道,弹出 Alert 不能包含文本输入框是 SwiftUI 的阿喀琉斯之踵(Achilles’ Heel) 。当然,这说的有些夸张了。😉

不过,Alert 不能包含 TextField 在某些情况下着实不方便。于是乎,从 SwiftUI 3.0(iOS 15+)开始,Apple 响应码农号召增加了这一功能:

在这里插入图片描述

想知道如何实现么?答案超乎寻常的简单!

闲言碎语不再讲,Let’s Go!!!😉


已废弃的旧 Alert

从 SwiftUI 诞生之日起,为了与 UIKit & AppKit 界面功能同步,Apple 创造了 Alert 视图专门用于小窗口的弹出操作:

在这里插入图片描述

不过, Alert 使用非常不灵活,其构造器使用起来非常死板:

在这里插入图片描述

我们只能按照规定弹出受限布局的窗口,最受诟病的就是其中不能嵌入文本输入框:

在这里插入图片描述

在这里插入图片描述

新 Alert 介绍

从 SwiftUI 3.0 开始,Apple 终于增强了 Alert 显示界面布局的表现力,我们可以妥妥的加入 TextField 等文本输入视图了:

在这里插入图片描述

func alert<S, A, M, T>(
    _ title: S,
    isPresented: Binding<Bool>,
    presenting data: T?, @ViewBuilder actions: (T) -> A, @ViewBuilder message: (T) -> M
) -> some View where S : StringProtocol, A : View, M : View

观察以上新 alert 修改器方法的签名可以发现:它将文本输入和按钮作为一组放在 actions 形参中,而将通知消息文本放在 message 形参中。

在 actions 实参中,我们可以自由组合 TextField、SecureField、Toggle(仅限 MacOS)、按钮等输入控件灵活的适配功能逻辑:

VStack {
    Button(role: .destructive, action: {
        isAlert = true
    }){
        Text("Alert!")
    }
    .alert("一大波僵尸正在靠近", isPresented: $isAlert, actions: {
    	// @ViewBuilder 的闭包,可以自由发挥随意组合视图...

		// SecureField 与 TextField 在 MacOS 中会被忽略
        SecureField("核武器启动密码", text: $pwd)
        TextField("当量", text: $power)
                
        Button(role: .destructive, action: {}){
            Text("核武器攻击!")
        }
        
        // 仅限 MacOS,iOS 中会被忽略
        Toggle("超级模式", isOn: $superMode)
        
        Button("再等等", role: .cancel, action: {})
    }){
        Text("距离大本营还有 \(Int.random(in: 0..<10000)) 公里...")
    }
}

下面是上述代码创建的 Alert 在 iOS 和 MacOS 中的弹出效果:

在这里插入图片描述

在这里插入图片描述

值得注意的是:MacOS 中的 Alert 不能显示文本输入视图,但可以显示 Toggle 视图(以按钮样式)。

现在,我们在遇到弹出窗口需要输入文本或密码的情况不会再捉襟见肘了,棒棒哒!💯🚀

总结

在本篇博文中,我们讨论了 SwiftUI 中新的 Alert 弹出窗口,使用它我们可以非常轻松的完成文本和密码的输入操作。

  • 更多关于 SwiftUI 知识的精彩博文,请移步 开发疑难秒懂百科
    专栏欣赏。

感谢观赏,再会!😉


http://lihuaxi.xjx100.cn/news/1103410.html

相关文章

硬件-6-基站和移动通信系统的演进

1G、2G、3G、4G、5G 移动通信技术发展简史 1 移动通信系统简介 移动通信系统从第一代移动通信系统(1G)开始逐渐发展&#xff0c;目前已经发展到第四代移动通信系统(4G)&#xff0c;第五代移动通信系统(5G)也已经开始标准化&#xff0c;预计2020年商用&#xff0c;6G预计2030年…

【无标题】nn.Conv2d参数详解及输入特征图尺寸的计算

在 PyTorch 中&#xff0c;nn.Conv2d 是一个实现了二维卷积&#xff08;convolution&#xff09;函数的神经网络模块。Conv2d 模块的核心部分即卷积运算&#xff0c;其接受的参数包括&#xff1a; in_channels&#xff1a;输入特征图&#xff08;feature map&#xff09;的通道…

GIT常用命令整理

文章目录 GIT常用命令整理GIT环境管理GIT分支管理代码提交&#xff1a;暂存区&#xff1a;版本对比&#xff1a;标签:子模块&#xff1a;其他&#xff1a; GIT常用命令整理 GIT环境管理 克隆仓库 git clone [url].gitignore&#xff1a;配置忽视的文件和目录&#xff0c;这些…

open3D

一、说明 对于点云 处理&#xff0c;这里介绍哦pen3d&#xff0c;该软件和opencv同样是interl公司的产品。 Open3D 是一个开源库&#xff0c;支持快速开发处理 3D 数据的软件。 Open3D 前端在 C 和 Python 中公开了一组精心挑选的数据结构和算法。后端经过高度优化&#xff0c;…

【鸿蒙应用ArkTS开发系列】- 导航栏Tab组件使用讲解

目录 Tabs介绍Tabs使用例子TabBar 样式设置定义菜单样式对象-NavigationItem定义一个底部菜单栏集合数据-NavigationList修改TabBuilder Tab 组件控制题外话 现在市场上的大部分应用&#xff0c;主页都是才用底部导航栏菜单作为页面主体框架来展示&#xff0c; 在鸿蒙中是使用…

新库上线 | CnOpenData缺陷产品召回数据

缺陷产品召回数据 一、数据简介 缺陷产品召回&#xff0c;是指缺陷产品的生产商、销售商、进口商在得知其生产、销售或进口的产品存在可能引发消费者健康、安全问题的缺陷时&#xff0c;依法向职能部门报告&#xff0c;及时通知消费者&#xff0c;设法从市场上、消费者手中收回…

Oracle Instant Client + PLSQL 部署终端PC远程连接数据库服务器简易操作

系统环境&#xff1a; 1、win7_64bit 2、instantclient_21_10 3、plsqldev1105_x64 4、远程Oracle数据库&#xff1a;Oracle11g R2 操作步骤&#xff1a; 1、下载好Oracle Instant Client 和PLSQL程序安装包&#xff1a; 1.1 Oracle Instant Client 官网&#xff1a;https://w…

Linux驱动编程(总线设备驱动模型)

一、驱动编写的3种方法 1、传统写法 使用哪个引脚&#xff0c;怎么操作引脚&#xff0c;都写死在代码中。最简单&#xff0c;不考虑扩展性&#xff0c;可以快速实现功能。修改引脚时&#xff0c;需要重新编译。 2、总线设备驱动模型 引入 platform_device/platform_driver&am…