Toggle

Toggle(isOn: $isCold.animation(.spring())) {
    if isCold {
        Image(systemName: "swift")
            .foregroundColor(.orange)
    }
    Text("cold")
}
.padding()
.tint(.blue)
.toggleStyle(.button)  // 默认是 swift， 可以转换为 button样式

Picker

截屏2022-12-08 下午6.42.09.png

private let weathers = [
  ("Sunshine", "sun.max.fill"),
  ("Cloud", "cloud"),
  ("Snow", "snow"),
  ("Rain", "cloud.rain.fill")
]
 
@State private var selectedWeather = 0   

var body: some View {
    Picker("Wealther", selection: $selectedWeather) {
        ForEach(0 ..< weathers.count) {
            Label(weathers[$0].0, systemImage: weathers[$0].1)
        }
    }
}

.pickerStyle(.wheel)

截屏2022-12-08 下午6.45.36.png

.pickerStyle(.segmented)

截屏2022-12-09 上午10.34.29.png

总共有这几种风格 .segmented .wheel .menu .inLine

DatePicker

1.默认样式

截屏2022-12-09 上午10.42.43.png

@State private var selectedDate = Date()

var body: some View {
    DatePicker("日期", selection: $selectedDate)
}

2.指定日期范围

DatePicker("日期", selection: $selectedDate, in: Date()...)

Date()... 表示只能选择当前日期之后的范围，如示例所示，...Date() 表示当前时间之前的范围，Date().addingTimeInterval(86400*7) 则表示当前时间往后一周的时间范围。

3.只显示部分组件

DatePicker("日期", selection: $selectedDate, displayedComponents: [.date, .hourAndMinute])

可以单独指定 .date 或者 .hourAndMinute 或者都不指定默认显示两者

4.可以隐藏前面的日期标签

labelsHidden()

DatePicker("日期", selection: $selectedDate)
    .labelsHidden()

5.展示风格

compact (上面已经展示-默认)
graphical

截屏2022-12-09 上午10.54.25.png

wheel

截屏2022-12-09 上午10.53.38.png

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 回调可以监听值的改变。

.tint(.orange) 可以改变滑竿的颜色。

示例代码：

Slider(value: $value, in: 70...147, step: 1, onEditingChanged: {
    self.isEditing = $0
}, minimumValueLabel: Text("70"), maximumValueLabel: Text("147")) {
  Text("Points")
}
.tint(.orange)

Stepper

类似 Slider ，使用简单，不再赘述。