認識 SwiftUI 的 Alert

你還愛我嗎 ? 會不會像周蕙唱的，愛不愛結果都教人傷心呢 ? 接下來就讓我們用 SwiftUI 的 Alert 顯示愛不愛吧 。

目標: 點選按鈕顯示愛或不愛的 alert，我們用兔子當例子，就算牠不愛我們，我們也不會太難過。

綁定型別 Bool 變數的 alert function

透過 function alert 顯示 alert。function alert 接受型別 Binding<Bool> 的參數，所以我們必須傳入型別 Bool 的變數讓它綁定。當變數內容為 true 時，alert 將顯示，當內容為 false 時，alert 將害羞地藏起來。

你還愛我嗎的 Alert 範例

struct ContentView: View {
    @State private var showAlert = false
    @State private var alertTitle = ""
    
    var body: some View {
        Button {
            showAlert = true
            alertTitle = ["愛", "不愛"].randomElement()!
        } label: {
            VStack {
                Image(.rabbit)
                    .resizable()
                    .scaledToFit()
                Text("你還愛我嗎")
            }
        }
        .alert(alertTitle, isPresented: $showAlert) {
            Button("OK") {
                
            }
        }
    }
}

說明。

.alert(alertTitle, isPresented: $showAlert) {
    Button("OK") {
                
    }
}

透過 View 的 function alert(_:isPresented:actions:) 顯示 Alert。

func alert<S, A>(
    _ title: S,
    isPresented: Binding<Bool>,
    @ViewBuilder actions: () -> A
) -> some View where S : StringProtocol, A : View

參數說明。

• title

alert 顯示的標題。

• isPresented

決定是否顯示 Alert，當 isPresented 為 true 時顯示 alert。為了傳入 Binding<Bool> 型別的資料，我們事先以 @State 宣告 Bool 型別的 showAlert，然後以 $showAlert 傳入。

• actions

設定 alert 顯示的 button，在此我們產生 button OK。button 點選後將關掉 alert，我們也可在 button 的 closure 裡設定點選後額外要做的事。

Button {
   showAlert = true
   alertTitle = ["愛", "不愛"].randomElement()!
} label: {
   VStack {
      Image(.rabbit)
         .resizable()
         .scaledToFit()
      Text("你還愛我嗎")
   }
}

點選 button 時將 showAlert 設為 true，alertTitle 設為愛或不愛，showAlert 為 true 時將觸發 alert 顯示，alertTitle 是 alert 顯示的標題。

結果。

如下圖所示，點選 button 將顯示 alert。當我們點選 OK 關掉 alert 時，showAlert 將自動被設為 false。

預設的 ok button

參數 actions 沒有產生任何 button 時，會顯示預設的 ok button。

.alert(alertTitle, isPresented: $showAlert) {
}

顯示 message (副標題)

透過參數 message 設定副標題。

.alert(alertTitle, isPresented: $showAlert) {
            
} message: {
    Text("真心不騙")
}

Alert 的 button 樣式

產生 alert 時，我們還可在產生 button 時傳入參數 role 設定 button 的樣式。

.alert(alertTitle, isPresented: $showAlert) {
    Button("OK") { }
    Button("Cancel", role: .cancel) { }
    Button("Destructive", role: .destructive) { }
}, message: {
    Text("真心不騙")
}