Alert in SwiftUI

Alert作为消息提示的一种方式也是非常方便实用的。当然它的使用方式也很简单。我们一起来看看。

单个按钮的Alert

只有一个确认按钮和标题，当我们点击Alert Button时会弹出如下样式的alert

struct AlertSample: View {
    @State private var showAlert: Bool = false
    @State private var backgronudColor: Color = .white
    
    var body: some View {
        ZStack {
            backgronudColor
                .edgesIgnoringSafeArea(.all)
            
            VStack {
                Button("Alert Button") {
                    showAlert.toggle()
                }
                .foregroundColor(Color.black)
            }
            .alert("Message", isPresented: $showAlert) {
                Button(role: .cancel) {} label: {
                    Text("Cancel")
                }
            }
        }
    }
}

单个按钮带有子消息的Alert

只需把上述代码改成一下代码就可以实现有子消息的alert，效果如下

struct AlertSample: View {
    @State private var showAlert: Bool = false
    @State private var backgronudColor: Color = .white
    
    var body: some View {
        ZStack {
            backgronudColor
                .edgesIgnoringSafeArea(.all)
            
            VStack {
                Button("Alert Button") {
                    showAlert.toggle()
                }
                .foregroundColor(Color.black)
            }
            .alert("Message", isPresented: $showAlert) {
                Button(role: .cancel) {} label: {
                    Text("Cancel")
                }
            } message: {
                Text("This is Swftui sample")
            }
        }
    }
}

双按钮的Alert

.alert("Message", isPresented: $showAlert) {
                Button(role: .cancel) {} label: {
                    Text("Cancel")
                }
                Button(role: .destructive) {
                    backgronudColor = .red
                } label: {
                    Text("Delete")
                }
            } message: {
                Text("This is Swftui sample")
            }

alert方法的定义中，actions可以有多个值。方法定义如下：

public func alert<A, M>(_ titleKey: LocalizedStringKey,
   isPresented: Binding<Bool>, 
  @ViewBuilder actions: () -> A,
   @ViewBuilder message: () -> M
) -> some View where A : View, M : View

以上代码效果如下：

使用传递值来显示消息

这个是什么意思呢？我们先来看看方法定义

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

其中presenting就是我们需要用来显示在message中的值，尤其当你需要动态删除某些数据之前，对特定数据做提示时就需要用到这个方法。

struct AlertSample: View {
    @State private var showAlert: Bool = false
    @State private var backgronudColor: Color = .white
    
    @State var name: String = ""
    
    var body: some View {
        ZStack {
            backgronudColor
                .edgesIgnoringSafeArea(.all)
            
            VStack {
                Button("Alert Button") {
                    name = "狂徒东北吴彦祖"
                    showAlert.toggle()
                }
                .foregroundColor(Color.black)
            }
            .alert(
                "Message",
                isPresented: $showAlert,
                presenting: name
            ) { str in
                Button(role: .cancel) {} label: {
                    Text("取消")
                }
                Button(role: .destructive) {
                    backgronudColor = .red
                } label: {
                    Text("拉黑")
                }
            } message: { str in
                Text("你去确定要拉黑(name)吗？")
            }
        }
    }
}

效果如下：

以上就是alert的基本使用。

大家有什么看法呢？欢迎留言讨论。
公众号：RobotPBQ