SwiftUI 開關 (Toggle) 與滑桿 (Slider)

除了文字輸入，我們常需要開關、調整數值等操作。SwiftUI 提供了 Toggle, Slider 與 Stepper 三種元件。

Toggle (開關)

Toggle 對應到 iOS 設定中常見的綠色開關，用來控制布林值 (Boolean) 狀態。

struct SettingsView: View {
    @State private var isWifiEnabled = true
    
    var body: some View {
        Toggle("Wi-Fi", isOn: $isWifiEnabled)
            .padding()
         
        if isWifiEnabled {
            Text("正在搜尋網路...")
        }
    }
}

樣式

你可以透過 .toggleStyle 改變它的外觀，例如變成按鈕樣式：

Toggle("靜音", systemImage: "bell.slash", isOn: $isMute)
    .toggleStyle(.button) // 按下去會變色，像按鈕一樣

Slider (滑桿)

Slider 用於在一個範圍內選擇連續的數值，例如音量或亮度。

struct VolumeView: View {
    @State private var volume: Double = 50
    
    var body: some View {
        VStack {
            Text("音量: \(Int(volume))")
            
            Slider(value: $volume, in: 0...100, step: 1) {
                Text("音量") // label (在某些平台顯示)
            } minimumValueLabel: {
                Image(systemName: "speaker.fill") // 最小值圖示
            } maximumValueLabel: {
                Image(systemName: "speaker.wave.3.fill") // 最大值圖示
            }
        }
        .padding()
    }
}

• in: 指定數值範圍 (例如 0 到 100)。
• step: 指定步進值 (例如每次增加 1)。如果省略，則是平滑滑動。

Stepper (步進器)

Stepper 適合用於精確增減小數值，例如購買數量。它由一個 "+" 號和一個 "-" 號組成。

struct ShopView: View {
    @State private var quantity = 1
    
    var body: some View {
        Stepper("購買數量: \(quantity)", value: $quantity, in: 1...10)
    }
}

這些元件通常會搭配 Form 來構建設定頁面，我們將在稍後介紹。