SwiftUI Swift 基础代码之SwiftUI 中的确认对话框confirmationDialog 您所在的位置:网站首页 confirmationdialog SwiftUI Swift 基础代码之SwiftUI 中的确认对话框confirmationDialog

SwiftUI Swift 基础代码之SwiftUI 中的确认对话框confirmationDialog

2024-04-02 06:50| 来源: 网络整理| 查看: 265

SwiftUI Release 3 带来了一些通用的视图修饰符,允许我们以非常相同的方式处理不同视图的语义相似操作。这些视图修饰符之一是onSubmit,我们可以使用它来管理表单和搜索字段。本周我们将讨论 SwiftUI 为我们提供的用于显示确认对话框的另一种视图修饰符。

确认对话框是一种广泛使用的 UI/UX 模式,我们通常使用它来确认应用程序中的一些危险操作。例如,我们可能会在从应用程序中删除任何敏感数据之前显示一个确认对话框。

struct ContentView: View { @StateObject var viewModel = ViewModel() var body: some View { NavigationView { List { ForEach(viewModel.messages, id: \.self) { message in Text(message) .swipeActions { Button( role: .destructive, action: { withAnimation { viewModel.delete(message) } } ) { Image(systemName: "trash") } } } } .navigationTitle("Messages") .onAppear { viewModel.fetch() } } } }

正如你在上面的例子中看到的,我们有一个屏幕显示来自视图模型的消息列表。我们使用滑动操作来提供与列表项相关的操作。在我们的例子中,我们显示了一个破坏性的按钮,一旦你点击它就会删除消息。让我们来看看如何使用新的ConfirmationDialog视图修饰符来显示确认对话框。

struct ContentView: View { @StateObject var viewModel = ViewModel() @State private var confirmationShown = false var body: some View { NavigationView { List { ForEach(viewModel.messages, id: \.self) { message in Text(message) .swipeActions { Button( role: .destructive, action: { confirmationShown = true } ) { Image(systemName: "trash") } } .confirmationDialog( "Are you sure?", isPresented: $confirmationShown ) { Button("Yes") { withAnimation { viewModel.delete(message) } } } } } .navigationTitle("Messages") .onAppear { viewModel.fetch() } } } }

在这里插入图片描述 我们将confirmationDialog视图修饰符附加到我们要删除的Text视图。它需要一些参数来显示确认对话框。

第一个是特定确认对话框的标题。它可以是Text视图或LocalizedStringKey。 第二个是绑定到一个布尔值,指示何时显示确认对话框。 第三个是@ViewBuilder闭包,我们可以使用它来提供使用按钮视图的可用操作。请记住,我们只能使用带有文本的按钮。 您不需要提供取消按钮。SwiftUI 会自动为任何确认对话框执行此操作。但是您仍然可以提供一个具有取消角色的按钮来替换默认的取消按钮。 .confirmationDialog("Are you sure?", isPresented: $confirmationShown) { Button("Yes") { withAnimation { viewModel.delete(message) } } Button("No", role: .cancel) {} }

在这里插入图片描述

请记住,您无需将 binding 的值更改为 false 即可关闭确认对话框。一旦用户点击任何提供的操作,SwiftUI 就会关闭确认对话框。

我应该提到的是,系统可以根据按钮的角色和突出程度对按钮进行重新排序。SwiftUI 对默认操作使用更高的突出度。您可以使用keyboardShortcut视图修饰符将任何提供的操作设为默认。

.confirmationDialog("Are you sure?", isPresented: $confirmationShown) { Button("Yes") { withAnimation { viewModel.delete(message) } }.keyboardShortcut(.defaultAction) Button("No", role: .cancel) {} }

SwiftUI 优雅地处理不同的环境,并在常规尺寸类中运行时将确认对话框显示为弹出框,在紧凑尺寸类中作为操作表显示。

该confirmationDialog视图调节也为我们提供了一种控制所呈现的对话框的标题知名度。所述titleVisibility参数接受的一个实例可见性枚举具有以下值之一:自动,可见和隐藏。

.confirmationDialog( "Are you sure?", isPresented: $confirmationShown, titleVisibility: .visible ) { Button("Yes") { withAnimation { viewModel.delete(message) } }.keyboardShortcut(.defaultAction) Button("No", role: .cancel) {} }

我们还可以使用接受另一个@ViewBuilder闭包的消息参数在标题下提供附加消息,以构建显示自定义消息的视图。

.confirmationDialog( "Are you sure?", isPresented: $confirmationShown, titleVisibility: .visible ) { Button("Yes") { withAnimation { viewModel.delete(message) } }.keyboardShortcut(.defaultAction) Button("No", role: .cancel) {} } message: { Text("This action cannot be undone") }

该confrimationDialog视图调节使我们能够提供可选的数据传递到@ViewBuilder既为信息和操作关闭。

.confirmationDialog( "Are you sure?", isPresented: $confirmationShown, titleVisibility: .visible, presenting: message ) { message in Button("Yes, delete: \(message)") { withAnimation { viewModel.delete(message) } }.keyboardShortcut(.defaultAction) Button("No", role: .cancel) {} } message: { message in Text(message) }

我喜欢新的ConfirmationDialog视图修饰符以及它为自定义我们的应用程序中的用户体验而提供的灵活性。

加入我们一起学习SwiftUI

QQ:3365059189 SwiftUI技术交流QQ群:518696470 教程网站:www.openswiftui.com

Share this...Share on FacebookFacebookPin on PinterestPinterestTweet about this on TwitterTwitterEmail this to someoneemailShare on LinkedInLinkedinShare on RedditReddit Related posts: WWDC21 新发布 SwiftUI 的十大新功能 SwiftUI iOS 精品项目之 04 RSS阅读器基于Json和CoreData (项目含源码) SwiftUI 高级动画Button按钮之点击后变化载入loading显示等待(教程含源码) Swift iOS 15 中的动态按钮配置 dynamic button configuration


【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

      专题文章
        CopyRight 2018-2019 实验室设备网 版权所有