在 SwiftUI 中建立現代化下拉選單

SwiftUI 是 Apple 在 WWDC 2019 推出的全新框架，旨在幫助開發者快速開發出跨平台的 App。隨著 SwiftUI 的不斷更新，開發者可以更加輕鬆地撰寫 UI 程式碼。在本篇文章中，我們將學習如何在 SwiftUI 中使用下拉選單，並提供一些實作範例及最佳實踐，以便於開發者更有效地利用這個強大的工具。

使用 Picker 建立下拉選單

在 SwiftUI 中，開發者可以使用 Picker 來建立下拉選單。Picker 允許開發者指定選項，並讓使用者選擇他們想要的選擇。以下是一個簡單的範例，顯示如何使用 Picker 來讓使用者選擇性別：

struct ContentView: View {
    @State private var selectedGender = 0

    var body: some View {
        VStack {
            Picker(selection: $selectedGender, label: Text("Gender")) {
                Text("Male").tag(0)
                Text("Female").tag(1)
            }
            .pickerStyle(MenuPickerStyle()) // 使用 MenuPickerStyle 來顯示下拉選單
            .padding()
        }
    }
}

在這個範例中，我們使用 Picker 來建立下拉選單。透過 selectedGender 來儲存選擇的結果。我們使用 Text 來定義選項，並透過 tag 來指定每個選項的值。這裡，我們選擇了 MenuPickerStyle 作為下拉選單的樣式，這是 SwiftUI 2025 版本中的最佳實踐。

使用 ActionSheet 建立下拉選單

除了 Picker，開發者還可以使用 ActionSheet 來建立彈出式的選單，讓使用者在彈出視窗中選擇選項。以下是使用 ActionSheet 的範例：

struct ContentView: View {
    @State private var selectedColor = 0
    @State private var showActionSheet = false

    var body: some View {
        VStack {
            Button(action: {
                self.showActionSheet = true
            }) {
                Text("Select Color")
            }
            .actionSheet(isPresented: $showActionSheet) {
                ActionSheet(title: Text("Select Color"), buttons: [
                    .default(Text("Red"), action: { self.selectedColor = 0 }),
                    .default(Text("Green"), action: { self.selectedColor = 1 }),
                    .default(Text("Blue"), action: { self.selectedColor = 2 }),
                    .cancel()
                ])
            }
        }
    }
}

在這個範例中，我們使用 ActionSheet 來呈現彈出式選單。透過 showActionSheet 來控制何時顯示選單，並使用 buttons 陣列來定義可選的顏色選項。

錯誤排除與最佳實踐

在實作下拉選單時，開發者可能會遇到一些常見的問題：

  • 選項不顯示：確保選項中的 tag 與 selection 變數正確對應。
  • UI 無法更新：確認你使用 @State 或 @Binding 正確地管理狀態。

此外，建議使用 MenuPickerStyle 或 ActionSheet，這不僅能提升使用者體驗，還能讓你的應用程式看起來更加現代化。

延伸應用

除了性別和顏色選擇，開發者可以使用下拉選單來實現各種功能，例如選擇國家、語言或其他設定選項。這樣的設計能夠增強使用者互動性，提升整體使用體驗。

在 SwiftUI 中使用下拉選單

Q&A（常見問題解答）

1. 如何在 SwiftUI 中自訂下拉選單的樣式？

你可以透過選擇不同的 pickerStyle 設置，例如 MenuPickerStyle 或 SegmentedPickerStyle，來自訂下拉選單的外觀。

2. 在 SwiftUI 中如何處理選擇改變的事件？

使用 @State 來儲存選擇的狀態，並在 Picker 或 ActionSheet 中將其綁定，這樣你就可以在選擇改變時執行相應的操作。

3. SwiftUI 的下拉選單可以支援多選嗎？

在 SwiftUI 中，Picker 本身不支援多選，但可以透過自訂 UI 或使用 List 配合 Toggle 來實現多選的功能。

—

Categorized in:

iOSswift

Tagged in:

,