譯自 Buttons and images
更多內容，歡迎關注公眾號：Swift花園
喜歡文章？不如來個 ?三連？關注專欄，關注我

Button 和 Image

在 SwiftUI 中，按鈕可以由兩種方式創建，取決于它們的外觀。

最簡單的方式是創建一個只包含文本的按鈕：你傳入按鈕的標題，并且提供一個閉包，這個閉包會在按鈕被點擊時執行：

Button("Tap me!") {print("Button was tapped")
}

如果你想要更多，比如一個圖像或者視圖的組合，你可以使用另外一種形式：

Button(action: {print("Button was tapped")
}) { Text("Tap me!")
}

當你需要在按鈕中配合圖像，那么上面這種方式尤其適用。

SwiftUI 有一個專門的 Image 類型，用于處于 app 中的圖片，并且有三種主要的創建方式：

• Image("pencil") 會加載一個叫 “pencil” 的圖片，它是你已經加入工程的圖片。
• Image(decorative: "pencil") 會加載相同的圖片，但不會在你啟用屏幕閱讀的時候被讀出來。這種方式在圖像沒有傳遞額外重要信息的時候很有用。
• Image(systemName: "pencil") 會加載 iOS 內建的 pencil 圖標。它用的是 Apple 的 SF Symbols 圖標集，你可以從 Apple 的網站下載這個全集，在全集中瀏覽和搜索圖標。

默認情況下，如果屏幕閱讀啟用，它會讀出你的圖片名稱。因此你要確保圖片名稱清晰合理以免令用戶困惑。或者，你也可以用 Image(decorative:) 構造器來明確這個名稱不需要被讀出來。

由于按鈕的第二種形式支持包含任何類型的視圖，你可以直接用一個圖像：

Button(action: {print("Edit button was tapped")
}) { Image(systemName: "pencil")
}

當然你也可以組合圖像和文字：

Button(action: {print("Edit button was tapped")
}) {HStack(spacing: 10) { Image(systemName: "pencil")Text("Edit")}
}

提示：如果你的圖像被填充了某個顏色，比如一個純藍色。這可能是因為 SwiftUI 將它們著色以表明圖像是可點擊的。為了解決這個問題，你可以用renderingMode(.original) 修改器來強制 SwiftUI 顯示原始的圖像而不是著色后的版本。

譯自 Showing alert messages

顯示 Alert 消息

如果某件重要的事情發生，一種常見的通知用戶的方式是使用 alert – 這是一種包含標題，消息，一到兩個按鈕的彈出式窗口。

思考一下：什么時候 alert 應當被展示？如何展示？視圖是狀態的函數，alerts 也不例外。因此，與其說是“顯示 alert”，不如說我們創建 alert 并且設置展示的條件。

一個基本的 SwiftUI alert 有標題，消息，和一個 dismiss 按鈕，就像這樣：

Alert(title: Text("Hello SwiftUI!"), message: Text("This is some detail message"), dismissButton: .default(Text("OK")))

如果你需要的話，可以添加更多代碼來配置按鈕的細節。更有趣的是，我們展示 alert 的方式：我們并不會把 alert 賦給某個變量然后調用 myAlert.show()這樣的代碼，因為這樣就又回到了“事件序列”的思維方式。

取而代之的是，我們創建一個 alert 是否顯示的狀態，像這樣：

@State private var showingAlert = false

然后，我們把 alert 附著在UI的某個地方，并且告訴它使用上面那個狀態來決定是否呈現 alert。SwiftUI 會觀察 showingAlert狀態，只要它變成 true，就會展示 alert。

下面是演示代碼，當按鈕被點擊時，顯示 alert：

struct ContentView: View {@State private var showingAlert = falsevar body: some View {Button("Show Alert") {self.showingAlert = true}.alert(isPresented: $showingAlert) {Alert(title: Text("Hello SwiftUI!"), message: Text("This is some detail message"), dismissButton: .default(Text("OK")))}}
}

上面的代碼是把 alert 依附在 button 上，不過實際上alert() 修改器被應用于哪里其實無所謂，我們所做的就是當 showingAlert 為真時展示 alert。

近距離檢視一下alert() 修改器：

.alert(isPresented: $showingAlert)

這里又是一個雙向綁定，因此當你關掉 alert 彈窗時 SwiftUI 會自動showingAlert 設置回 false。

我的公眾號 這里有Swift及計算機編程的相關文章，以及優秀國外文章翻譯，歡迎關注～