SwiftUI - 如何在 ToolbarItem 中的按钮中显示警报提示框

Question

我想做类似下面代码的功能，即当用户点击导航栏项按钮时弹出一个提示框。然而下面的代码无法生效，提示框没有显示。

我不能将alert修饰符添加到NavigationView中，因为我的实际应用程序更加复杂，而VStack是另一个文件中的视图，而且在同一视图中添加多个alert修饰符无法生效（只有最后一个添加的生效）。

import SwiftUI

struct SOQuestionView: View {
    @State private var showAlert1 = false
    @State private var showAlert2 = false

    var body: some View {
        NavigationView {
            VStack {
                Text("Click button in toolbar")
            }
            .navigationBarTitle(Text("Title"))
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button(action: {
                        showAlert1 = true
                    }) {
                        Image(systemName: "square.and.arrow.up")
                    }
                    .alert(isPresented: $showAlert1) {
                        Alert(title: Text("Alert 1"))
                    }
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: {
                        showAlert2 = true
                    }) {
                        Image(systemName: "square.and.arrow.up.fill")
                    }
                    .alert(isPresented: $showAlert2) {
                        Alert(title: Text("Alert 2"))
                    }
                }
            }
        }
    }
}

- marchinram

---

最简单的解决方案是将每个按钮制作成自己的子视图。这样，每个子视图都可以有自己的.alert修饰符。 - nicksarno

这个也可能有效，但是针对这个例子，我认为跟随@Asperi的解决方案更容易些。 - marchinram

Answer 1

解决方法是在工具栏之外使用不同的构造函数来使用alert。已在Xcode 12.1 / iOS 14.1上进行了测试。

演示：

struct SOQuestionView: View {
    @State private var alertItem: String? // assuming item confirmed to Identifiable
    
    var body: some View {
        NavigationView {
            VStack {
                Text("Click button in toolbar")
            }
            .navigationBarTitle(Text("Title"))
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button(action: {
                        alertItem = "Alert 1"
                    }) {
                        Image(systemName: "square.and.arrow.up")
                    }
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: {
                        alertItem = "Alert 2"
                    }) {
                        Image(systemName: "square.and.arrow.up.fill")
                    }
                }
            }
            .alert(item: $alertItem) { item in
                Alert(title: Text(item))
            }
        }
    }
}

- Asperi

---

这个可以工作，但是你需要确保把String符合Identifiable的要求。 - marchinram

Answer 2

我使用这个视图来传递带有警报的按钮，在ToolbarItem中正常工作。

struct AlertButton<L: View, M: View, A: View>: View {
    @ViewBuilder let label: () -> L
    let alertTitle: LocalizedStringKey
    @ViewBuilder let alertMessage: () -> M
    @ViewBuilder let actions: () -> A

    @State private var isAlertPresented = false

    var body: some View {
        Button {
            isAlertPresented.toggle()
        } label: {
            label()
        }
        .alert(
            alertTitle,
            isPresented: $isAlertPresented,
            actions: actions,
            message: alertMessage
        )
    }
}

- Maxime Ashurov