SwiftUI — confirmationDialog

在 SwiftUI 中，confirmationDialog 是一个非常方便的视图修饰符，用于展示确认对话框（Confirmation Dialog），也就是我们熟知的 Action Sheet。confirmationDialog 允许你展示一种或多种选项，让用户进行选择，通常用于确认某些操作或提供多种操作选项。

以下是关于如何使用 confirmationDialog 的详细说明和示例代码。

1. 基本用法 #

基本结构 #

要使用 confirmationDialog，你需要一个状态变量来控制对话框的显示，并在需要显示的视图上调用 confirmationDialog 修饰符。

import SwiftUI

struct ContentView: View {
    @State private var showDialog = false
    @State private var selectedOption = ""

    var body: some View {
        VStack(spacing: 20) {
            Button("Show Confirmation Dialog") {
                showDialog.toggle()
            }

            Text("Selected Option: \(selectedOption)")
                .padding()
        }
        .confirmationDialog("Are you sure?", isPresented: $showDialog, titleVisibility: .visible) {
            Button("Option 1") {
                selectedOption = "Option 1"
            }

            Button("Option 2") {
                selectedOption = "Option 2"
            }

            Button("Cancel", role: .cancel) {}
        }
    }
}

解释： #

  1. 状态控制：

    • 使用 @State 定义一个布尔变量 showDialog 来控制对话框的显示。
    • 使用另一个状态变量 selectedOption 存储用户选择的选项。

  2. 导航按钮：

    • 一个简单的按钮，点击后切换 showDialog 状态，从而展示对话框。

  3. 对话框内容：

    • confirmationDialog 修饰符配置了对话框的标题、显示绑定状态和嵌套的按钮选项。
    • 可以设置多个按钮来展示不同的选项，并可以对每个按钮设置不同的动作。
    • role: .cancel 的按钮将会在对话框底部显示，表示取消操作。

2. 带有破坏型选项（Destructive Actions） #

在某些情况下，你可能需要提供一个破坏操作，例如删除数据。你可以通过设置 role: .destructive 来标志破坏性操作，使其在用户界面上显得更醒目（通常会被显示为红色）。

示例代码：带有破坏性操作的对话框 #

import SwiftUI

struct ContentView: View {
    @State private var showDialog = false
    @State private var selectedOption = ""

    var body: some View {
        VStack(spacing: 20) {
            Button("Show Confirmation Dialog") {
                showDialog.toggle()
            }

            Text("Selected Option: \(selectedOption)")
                .padding()
        }
        .confirmationDialog("Select an Option", isPresented: $showDialog, titleVisibility: .visible) {
            Button("Delete", role: .destructive) {
                selectedOption = "Delete"
            }

            Button("Archive") {
                selectedOption = "Archive"
            }

            Button("Cancel", role: .cancel) {}
        }
    }
}

解释： #

  • Button("Delete", role: .destructive): 标记这个按钮的操作类型为破坏性，会以红色显示。
  • Button("Cancel", role: .cancel): 标记这个按钮为取消操作，避免误操作。

3. 动态生成对话框内容 #

在更复杂的场景中，你可能需要根据状态或数据动态生成对话框的内容。你可以在 confirmationDialog 中使用 ForEach 生成动态选项。

示例代码：动态生成选项 #

import SwiftUI

struct ContentView: View {
    @State private var showDialog = false
    @State private var selectedOption = ""
    let options = ["Option 1", "Option 2", "Option 3", "Option 4"]

    var body: some View {
        VStack(spacing: 20) {
            Button("Show Confirmation Dialog") {
                showDialog.toggle()
            }

            Text("Selected Option: \(selectedOption)")
                .padding()
        }
        .confirmationDialog("Select an Option", isPresented: $showDialog, titleVisibility: .visible) {
            ForEach(options, id: \.self) { option in
                Button(option) {
                    selectedOption = option
                }
            }

            Button("Cancel", role: .cancel) {}
        }
    }
}

解释： #

  • 使用 ForEach 动态生成选项按钮，通过传入选项数组 options 自动生成按钮。
  • 每个生成的按钮设置对应的动作，选择后更新 selectedOption。

4. 使用 Alert 替代 confirmationDialog #

在一些场景中，alert 可能比 confirmationDialog 更适合用来提示用户。Alert 支持简单的确认或取消操作。

示例代码：使用 Alert #

import SwiftUI

struct ContentView: View {
    @State private var showAlert = false
    @State private var selectedOption = ""

    var body: some View {
        VStack(spacing: 20) {
            Button("Show Alert") {
                showAlert.toggle()
            }

            Text("Selected Option: \(selectedOption)")
                .padding()
        }
        .alert("Are you sure?", isPresented: $showAlert) {
            Button("Confirm") {
                selectedOption = "Confirmed"
            }
            Button("Cancel", role: .cancel) {}
        }
    }
}

解释： #

  • 使用 @State 变量 showAlert 控制 alert 的显示。
  • alert 修饰符设置确认和取消按钮。
  • 确认按钮设置对应的动作，更新状态变量。

5. 在多平台支持 #

confirmationDialog 可用于 iOS 和 macOS 平台。你可以使用同样的代码结构在这两个平台上呈现对话框。

示例代码：多平台支持 #

import SwiftUI

struct ContentView: View {
    @State private var showDialog = false
    @State private var selectedOption = ""

    var body: some View {
        VStack(spacing: 20) {
            Button("Show Confirmation Dialog") {
                showDialog.toggle()
            }

            Text("Selected Option: \(selectedOption)")
                .padding()
        }
        .confirmationDialog("Select an Option", isPresented: $showDialog, titleVisibility: .visible) {
            Button("Delete", role: .destructive) {
                selectedOption = "Delete"
            }

            Button("Archive") {
                selectedOption = "Archive"
            }

            Button("Cancel", role: .cancel) {}
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity) // 支持 macOS
    }
}

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

解释： #

  • .frame(maxWidth: .infinity, maxHeight: .infinity) 使得视图在 macOS 窗口中扩展到最大。
  • confirmationDialog 的同样实现适用于 iOS 和 macOS，不需要更改代码结构。

总结 #

confirmationDialog 是 SwiftUI 中一个强大的工具，用于展示确认操作或提供多个选择。通过操作提示、破坏性操作、动态生成选项和多平台支持，confirmationDialog 可以在各种应用场景中提供友好的用户交互体验。运用这些示例及说明，你可以更加灵活地在项目中应用 confirmationDialog，提升用户界面的交互性和可用性。

本文共 1433 字，上次修改于 Jan 18, 2025