第 6 章
使用 SwiftUI 按鈕、標籤與漸層

按鈕可啟動App 的特定動作，其有自訂背景，並可加入一個標題或一個圖示。這個系統為大部分的使用情況提供許多預定義的按鈕樣式。你也可以充分設計自訂按鈕。

- Apple 的官方文件 (https://developer.apple.com/design/human-interface-guidelines/ios/controls/buttons/)

我想應該不需要去解釋什麼是按鈕，它是一個非常基本的 UI 控制元件，你可以在所有的 App 中看到它，按鈕可處理使用者的觸控動作，並觸發特定的動作。倘若你之前有學過 iOS 程式設計的話，SwiftUI 的 Button 與 UIKit 的UIButton 非常相似，但更具彈性與可客製化，待會你將會了解我的意思。在本章中，我將詳細介紹 SwiftUI 控制元件，你將學到下列的技巧：

1. 如何建立一個簡單的按鈕，並處理使用者的選擇。
2. 如何自訂按鈕的背景、間距與字型。
3. 如何在按鈕上加入邊框。
4. 如何建立包含圖片和文字的按鈕。
5. 如何建立具有漸層背景與陰影的按鈕。
6. 如何建立一個全寬度（full-width）的按鈕。
7. 如何建立一個可重複使用的按鈕樣式。
8. 如何加入一個點擊按鈕動畫。

啟用 SwiftUI 來建立新專案

好的，讓我們從基礎開始，使用 SwiftUI 來建立一個簡單的按鈕。首先開啟Xcode， 並使用「App」模板建立一個新專案。接著於下一個畫面輸入專案的名稱，我將它設定為「SwiftUIButton」，不過你可以自由使用其他的名稱。你只需確保於 Interface 選項下已選取「 SwiftUI」即可，如圖 6.1 所示。

當你儲存專案後，Xcode 應會載入 ContentView.swift 檔，並在設計畫布中顯示一個預覽畫面，如圖 6.2 所示。

使用 SwiftUI 建立按鈕非常簡單。基本上，你可以使用下列的程式碼片段來建立按鈕：

想更深入學習SwiftUI和下載完整程式碼？你可以從 AppCoda網站購買《精通 SwiftUI》完整電子版。