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

DatePickerPicker 类似,不过数据源和绑定的选中值变成了日期。

我们先声明一个日期:

@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() 使之隐藏。

示例中也展示了 GraphicalDatePickerStyleWheelDatePickerStyle 的展示效果,更多 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 查看更多内容。

posted @ 2021-05-10 14:31  Bruce2077  阅读(1317)  评论(0编辑  收藏  举报