SwiftUI 简明教程之选择器
本文为 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 查看更多内容。
