如何使用SwiftUI展示警报提示

29

SwiftUI 中,我发现了 Alert 类型。但我想知道如何使用 presentation 方法显示它。

初始化一个 Alert 很容易。但如何使用绑定(binding)?

struct ContentView : View {
    var body: some View {
        Button(action: {
            // Don't know how to use the `binding` below
            presentation(binding, alert: {
                Alert(title: Text("Hello"))
            })
        }, label: {
            Text("asdf")
        })
    }
}

绑定的类型为 Binding<Bool>
11个回答

33

.presentation() 在Beta 4中已被弃用。这里提供一个版本,当前可与.alert()修饰符一起使用。

struct ContentView: View {
    @State var showsAlert = false
    var body: some View {
        Button(action: {
            self.showsAlert.toggle()
        }) {
            Text("Show Alert")
        }
        .alert(isPresented: self.$showsAlert) {
            Alert(title: Text("Hello"))
        }
    }
}

2
我们如何在 Helper 中使用它?因为我们需要多次调用 Alert。 - Rob
我也想知道。我很希望有一个名为“showAlert”的辅助函数,它需要一个标题和一段文本。例如,如果没有提供参数,则显示通用警告。我尝试将其实现为视图结构的扩展,但无法使其正常工作:/。 - Schnodderbalken
你可以像这样制作一个简单的扩展程序 @Schnodderbalken - Mojtaba Hosseini

15

您可以使用@State变量作为绑定。或者您可以使用使用BindableObject@EnvironmentObject变量。

我认为您需要在根视图上调用presentation才能使其工作,在StackGroup等中添加它似乎不起作用。

这段代码片段似乎可以解决问题。请注意,@State变量在警报被解除后设置为false。

struct ContentView: View {

    @State var showsAlert = false

    var body: some View {
        Button(action: {
            self.showsAlert = true
        }, label: {
            Text("asdf")
        }).presentation($showsAlert, alert: {
            Alert(title: Text("Hello"))
        })
    }
}

1
或者你可以使用 PresentationButton,以更少的代码实现你所做的事情。 - Fab1n
6
很遗憾,这个答案已经不正确了,因为在SwiftUI中.presentation已经被弃用。 - funkenstrahlen
这段代码应如何修改以处理带有处理程序的警报?Swift具有使用处理程序的能力。 - Learn2Code

15

带有取消和确认操作的警报的完整代码:

代码:

import SwiftUI

struct ContentView: View {
    @State private var isAlert = false

    var body: some View {
            Button(action: {
                self.isAlert = true
            }) {
                Text("Click Alert")
                .foregroundColor(Color.white)
            }
            .padding()
            .background(Color.blue)
            .alert(isPresented: $isAlert) { () -> Alert in
                Alert(title: Text("iOSDevCenters"), message: Text("This Tutorial for SwiftUI Alert."), primaryButton: .default(Text("Okay"), action: {
                    print("Okay Click")
                }), secondaryButton: .default(Text("Dismiss")))
        }

    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

输出:

输出


10
这里是呈现多个警报的解决方案。适用于。
struct YourView: View {
    enum AlertType: Identifiable {
        case first, second
        
        var id: Int {
            hashValue
        }
    }
    
    @State var alertType: AlertType?
    
    var body: some View {
        VStack {
            Button("Show alert #1") {
                alertType = .first
            }
            
            Button("Show alert #2") {
                alertType = .second
            }
        }
        .alert(item: $alertType) { type in
            switch type {
            case .first:
                return Alert(title: Text("First alert"))
            case .second:
                return Alert(title: Text("Second alert"))
            }
        }
    }
}

6
除了 @tsp 的答案,想要显示一个有两个按钮的警告框并处理按钮点击操作,您可以按照以下步骤进行:
@State var showAlert = false

var body: some View {
  Button(action: {
    self.showAlert = true
  }) {
    Text("Show Alert")
  }
  .presentation($showAlert) {
      Alert(title: Text("Title"), message: Text("Message..."),
          primaryButton: .default (Text("OK")) {
            print("OK button tapped")
          },
          secondaryButton: .cancel()
      )
  }
}

结果:

在此输入图片描述


4

SwiftUI 弹出警告框

使用 onTapGesture 的示例

struct MyRow: View {
    @State private var showingAlert = false
    
    var body: some View {
        HStack {
            Text("Hello")
            Text("World")
        }
        .onTapGesture {
            self.showingAlert = true
        }
        .alert(isPresented: $showingAlert, content: {
            Alert(title: Text("Title"), message: Text("Message"), dismissButton: .default(Text("OK")))
        })
    }
}

我一直无法使SwiftUI中的拖动手势(alerts)工作。有任何想法如何在这种情况下实现吗?谢谢! .overlay(Rectangle() .gesture( DragGesture(minimumDistance: 50) .onEnded { gesture in if correct gesture... { .alert(isPresented: $showAlert, content: { Alert()... 这个警报无法编译 - Tim

3

除了@thisIsTheFoxe的答案之外,您还可以实现一个简单的扩展:

扩展

public extension View {
    func alert(isPresented: Binding<Bool>,
               title: String,
               message: String? = nil,
               dismissButton: Alert.Button? = nil) -> some View {

        alert(isPresented: isPresented) {
            Alert(title: Text(title),
                  message: {
                    if let message = message { return Text(message) }
                    else { return nil } }(),
                  dismissButton: dismissButton)
        }
    }
}

用法:

现在你可以轻松地使用它,例如:

struct ContentView: View {
    @State var showsAlert = false
    var body: some View {
        Button("Show Alert") {
            self.showsAlert.toggle()
        }
        .alert(isPresented: $showsAlert, title: "title", message: "Message") // <- Here
    }
}

1
  struct ContentView: View {
        @State private var showingAlert = false
    
        var body: some View {
            Button("Show Alert") {
                showingAlert = true
            }
            .alert("Important message", isPresented: $showingAlert) {
                Button("First") { }
                Button("Second") { }
                Button("Third") { }
            }
        }
    }

enter image description here


1

SwiftUI

首先创建基本警告:

Alert(title: Text("Alert title"), message: Text("Alert message"), dismissButton: .default(Text("Got it!")))

然后定义一个可绑定的条件,告诉警报何时可见或不可见。 切换该条件以显示/隐藏警报。

struct ContentView: View {
    @State private var showingAlert = false

    var body: some View {
        Button(action: {
            self.showingAlert = true
        }) {
            Text("Show Alert")
        }
        .alert(isPresented: $showingAlert) {
            Alert(title: Text("Important message"), message: Text("Wear sunscreen"), dismissButton: .default(Text("Got it!")))
        }
    }
}

1
struct ContentView: View {

    @State var aAlert = false

    var body: some View {
        Text("Alert").tapAction {
            self.aAlert = true
        }.presentation($aAlert, alert:{ Alert(title: Text("Alert"))})
    }
}

1
你能详细解释一下你的答案吗?例如,关于你代码片段中有趣部分的解释或者文档链接? - Richard-Degenne

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接