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 查看更多内容。

• 还没有人评论，欢迎说说您的想法！