本文為 Eul 樣章，如果您喜歡，請移步 AppStore/Eul 查看更多內容。
Eul 是一款 SwiftUI & Combine 教程類 App（iOS、macOS），以文章（文字、圖片、代碼）配合真機示例（Xcode 12+、iOS 14+，macOS 11+）的形式呈現給讀者。筆者意在盡可能使用簡潔明了的語言闡述 SwiftUI & Combine 相關的知識，使讀者能快速掌握並在 iOS 開發中實踐。
Toggle
Toggle 可以直接傳入字符串構建，也可以自定義樣式，如示例所示，Cold 對應的開關，我們傳入的是一個 Label 。並且通過 if isCold { Image... } 條件渲染左邊的天氣圖標。
我們還可以在狀態切換時加入平滑的過渡動畫，比如：
Toggle(isOn: $isCold.animation(.spring())) {
// code
}
Toggle 有如下 Style，以下只列舉 iOS 和 macOS 平台：
| ToggleStyle | Platform |
|---|---|
| DefaultToggleStyle | iOS 13.0+：表現為 Switch macOS 10.15+：表現為 Checkbox |
| SwitchToggleStyle | iOS 13.0+ macOS 10.15+ |
| CheckboxToggleStyle | macOS 10.15+ |
如果我們想改變 Switch 的顏色，可以通過 SwitchToggleStyle 初始化方法賦值：
.toggleStyle(SwitchToggleStyle(tint: .blue))
Picker
SwiftUI 中的 Picker 通過綁定的數據源和選中值，自動管理列表視圖的選中狀態。
我們先定義一組天氣的數據：
private let weathers = [
("Sunshine", "sun.max.fill"),
("Cloud", "cloud"),
("Snow", "snow"),
("Rain", "cloud.rain.fill")
]
@State private var selectedWeather = 0
然后創建一個 Picker ：
Picker(selection: $selectedWeather, label: Text("Weather")) {
ForEach(0 ..< weathers.count) {
Label(weathers[$0].0, systemImage: weathers[$0].1)
}
}
這里沒有指定 PickerStyle，其默認值是 DefaultPickerStyle，在示例中可以查看各種樣式的視覺表現，更多 PickerStyle 詳細信息參考官方文檔。
示例中的 Picker 使用的是同一個實例對象和數據源，所以會有聯動效果。
DatePicker
DatePicker 與 Picker 類似，不過數據源和綁定的選中值變成了日期。
我們先聲明一個日期：
@State private var selectedDate = Date()
然后就可以創建一個日期控件了：
DatePicker("日期", selection: $selectedDate)
這個控件日期默認不會指定日期范圍，會同時展示日期和時間。如果我們需要指定日期的范圍，可以這樣做：
DatePicker(selection: $selectedDate, in: Date()..., displayedComponents: .date) {
Label("日期", systemImage: "clock.fill").foregroundColor(.blue)
}
Date()... 表示只能選擇當前日期之后的范圍，如示例所示，...Date() 表示當前時間之前的范圍，Date().addingTimeInterval(86400*7) 則表示當前時間往后一周的時間范圍。
displayedComponents: .date 表示展示樣式是日期，我們可以指定其為 .hourAndMinute ，或者同時指定兩者（默認就是如此）。
如果我們不想展示日期左邊的標簽，可以調用 .labelsHidden() 使之隱藏。
示例中也展示了 GraphicalDatePickerStyle 和 WheelDatePickerStyle 的展示效果，更多 macOS 以及 DatePickerStyle 詳細說明請參考官方文檔。
Slider
Slider 綁定的數據類型必須是浮點型，它的滑動范圍默認是 0 到 1。
如下我們生命綁定數據的默認值是 0.5，然后生成一個 Slider 實例。
@State private var value: CGFloat = 0.5
Slider(value: $value)
我們也可以指定滑動范圍，比如：
Slider(value: $value, in: 0.1...1)
給最值添加 Label：
Slider(value: $value, in: 0.5...1, minimumValueLabel: Text("0.5"), maximumValueLabel: Text("1)")) {}
指定步進值（step）：
Slider(value: $value, in: 0...1, step: 0.2) {}
初始化方法提供的 onEditingChanged 回調可以監聽值的改變。
.accentColor(Color?) 可以改變滑竿的顏色。
示例代碼：
Slider(value: $value, in: 70...147, step: 1, onEditingChanged: {
isEditing = $0
}, minimumValueLabel: Text("70"), maximumValueLabel: Text("147")) {
Text("Points")
}
.footnote("Points: \(value), is changing: \(isEditing)")
.accentColor(.orange)
Stepper
類似 Slider ，使用簡單，不再贅述。
示例代碼：
Stepper(value: $shoes, in: 2...20, step: 2) {
Text("Pair of shoes: \(shoes/2)")
}
ColorPicker
SwiftUI 提供了高度集成的顏色選擇器：
ColorPicker(selection: $selectedColor, supportsOpacity: false) {
Label("Apple Color", systemImage: "applelogo")
.foregroundColor(selectedColor)
}
示例代碼所示是通過自定義的 View 構建視圖，當然我們也可以通過字符串快速構建視圖，這里略過。supportsOpacity 默認是 true，可以設置透明度，這里我們顯式設置為 false。通過選擇顏色，我們可以改變 Label 中的蘋果 logo 和文字的顏色。
本文為 Eul 樣章，如果您喜歡，請移步 AppStore/Eul 查看更多內容。