在 iOS 15 中為 SwiftUI 按鈕設置樣式　大大節省開發時間

在 iOS 15 中，Apple 引入了一個新方法，來為 SwiftUI 和 UIKit 框架的 iOS App 客製化按鈕。這篇教學文章主要會介紹 SwiftUI 的新功能，如果你有興趣了解如何在 iOS 15 中設置 UIButton 樣式，可以參考 Sarun 撰寫的這篇文章。

在 SwiftUI 設置按鈕樣式

在我們介紹 iOS 15 的新修飾符 (modifier) 之前，先重溫一下現在我們設置按鈕樣式的方法。

比如說，我們想創建一個圓角按鈕，就可以如此編寫程式碼：

Button(action: {}) {
    Text("Buy me a coffee")
}
.padding()
.foregroundColor(.white)
.background(Color.purple)
.clipShape(RoundedRectangle(cornerRadius: 5))

我們利用 .clipShape 修飾符，來客製化按鈕的前景和背景顏色、應用間距 (padding) 和圓角。

在 iOS 15 中，要創建一個類似的圓角按鈕，我們可以使用新修飾符 buttonBorderShape，並應用 BorderedProminentButtonStyle 新樣式：

Button(action: {}) {
    Text("Buy me a coffee")
}
.tint(.purple)
.buttonStyle(.borderedProminent)
.buttonBorderShape(.roundedRectangle(radius: 5))
.controlSize(.large)

應用 .borderedProminent 樣式後，iOS 就會將按鈕呈現為紫色背景和白色文字。.buttonBorderShape 則是讓我們設置按鈕的邊框形狀 (border shape)，在這裡，我們會設置為 .roundedRectangle，以創建圓角按鈕。

控制按鈕的大小

我們可以利用 .controlSize 來改變按鈕的大小。按鈕的預設大小是 .regular，其他可選的設定包括 .large、.small、和 .mini。讓我們看看不同大小的按鈕：

按鈕的邊框形狀

除了 .roundedRectangle 外，SwiftUI 還提供了另外一個邊框形狀 .capsule，讓開發者可以創建膠囊形狀的按鈕。

我們也可以使用 .automatic，讓系統自動調整按鈕的形狀。

改變按鈕樣式

之前我們一直在使用 .borderProminent 按鈕樣式。新版本的 SwiftUI 提供了其他內置樣式，包括 .bordered、.borderless 和 .plain。.bordered 樣式是我們通常會使用的樣式。以下是在淺色 (light) 和深色模式 (dark mode) 下，使用 .bordered 樣式的按鈕預覽圖片：

當然，我們還是可以自己編寫程式碼來創建同樣的按鈕，但這個 iOS 15 的新樣式就可以為我們節省不少編寫程式碼的時間。

把樣式應用到多個按鈕

設定好按鈕樣式之後，我們就可以簡單地為一組按鈕應用同一樣式，看看以下例子：

VStack {
    Button(action: {}) {
        Text("Add to Cart")
            .font(.headline)
    }

    Button(action: {}) {
        Text("Discover")
            .font(.headline)
            .frame(maxWidth: 300)
    }

    Button(action: {}) {
        Text("Check out")
            .font(.headline)
    }
}
.tint(.purple)
.buttonStyle(.bordered)
.controlSize(.large)

利用按鈕 Role

SwiftUI 框架的 iOS 15 版本為 Button 引入了一個新的 role 選項。這個選項會描述按鈕的 Semantic Role。iOS 會根據指定的 role，自動為按鈕呈現適當的外觀。

比如說，我們把 role 定義為 .destructive：

Button("Delete", role: .destructive) {
    print("Delete")
}
.buttonStyle(.borderedProminent)
.controlSize(.large)

iOS 就會自動以紅色顯示 Delete 按鈕。讓我們看看不同 role 和樣式的配搭，會創建出怎樣的按鈕外觀：

確認對話框 (Confirmation Dialog)

iOS 15 除了新的按鈕樣式之外，還有一個新修飾符 .confirmationDialog，我們可以將其附加到 Button 來顯示一個確認對話框。

讓我們看看顯示確認對話框的範例程式碼：

struct DemoView: View {
    @State private var isShowingDialog = false
    var body: some View {
        Button("Delete", role: .destructive) {
            isShowingDialog = true
        }
        .buttonStyle(.borderedProminent)
        .controlSize(.large)
        .confirmationDialog("Are you sure to delete the data?", isPresented: $isShowingDialog, titleVisibility: .visible) {

            Button("Confirm", role: .destructive) {
                // Handle the delete action.
            }
            Button("Cancel", role: .cancel) {

            }
        }
    }
}

我們可以在 .confirmationDialog 修飾符設定標題和布林值，用來決定是否顯示對話框。你也可以在 titleVisibility 選擇是否顯示標題。

編寫好上述的程式碼後，我們會得到以下的確認對話框：

利用 Material 客製化按鈕

在 iOS 15 中，SwiftUI 引入了一個 Material 型別，讓開發者可以創建不同的模糊效果 (blur effect)。我們可以在.background 修飾符添加以下的 Material，在一個視圖後面的視圖上應用模糊效果。

• .ultraThickMaterial
• .thickMaterial
• .regularMaterial
• .thinMaterial
• .ultraThinMaterial

讓我們看看應用了 .ultraThinMaterial 的範例程式碼：

Button(action: {}) {
    Text("Add to Cart")
        .font(.headline)
}
.padding()
.background(.ultraThinMaterial, in: Capsule())

就如 Apple 所說，添加 Material 就像是在視圖與其背景之間插入一個半透明層 (translucent layer)。如果我們使用不同的 Material，就會實作出不同的模糊效果。你可以參考下圖，看看不同 Material 實作出的模糊效果。

Toggle 按鈕

在 iOS 中，Toggle 就像是一個開關按鈕。在 iOS 15 中，我們可以使用 .toggleStyle 修飾符，將 Toggle 設置顯示為一個按鈕：

struct DemoView: View {
    @State private var isEnabled = false

    var body: some View {

        Toggle(isOn: $isEnabled) {
            Label("Airplane mode", systemImage: "airplane.circle.fill")
        }
        .padding()
        .tint(.purple)
        .controlSize(.large)
        .toggleStyle(.button)
    }
}

把 .toggleStyle 設置為 .button 後，Toggle 就會變成按鈕的模樣。以下是 Toggle 在 ON/OFF 狀態時的外觀：

總結

iOS 15 為客製化 SwiftUI 按鈕帶來了許多改進。雖然我們也可以創建自己的方法來設計按鈕樣式，但新版本的 SwiftUI 有很多內置樣式，減輕了開發者的工作。

這些新功能唯一的缺點，就是只支援 iOS 15。如果你的 App 支援舊版本的 iOS，就需要自己實作來設置按鈕樣式。