【SwiftUI基础篇】12 取值器Slider(滑动取值)、Stepper(步进)、Toggle(切换)

SwiftUI提供了一些漂亮的调整控制器方便取值，前面有学到过颜色、选项、时间选择，这都是取值器，本文将介绍实用的几个微调取值器。

一、 Slider 滑动取值

Slider 用于让用户在一个连续的范围中取值。 构造 Slider 需要一个绑定的值和一个范围（需要是 CloseRange， 也就是"..."）。注意：Slider 的构造函数其实还支持传入一个 label 参数，这个 label 参数在很多的样式中不会显示，但是 VoiceOver之类的功能会用这个 Label 来识别该 Slider。

1、基本使用：

1、将滑动值传入给$speed
Slider(value: $speed, in: 0...100)
Text("(speed)")//利用Text实时显示滑动值

2、onEditingChanged回调

下面的示例显示了一个绑定到speed值的滑块。当滑块更新这个值时，一个绑定的文本视图会显示这个值的更新。传递给滑块的onEditingChanged闭包在用户拖动滑块时接收回调。这个例子使用它来改变值文本的颜色。

//onEditingChanged 参数，会在用户滑动的开始和结束调用
Slider(value: $speed, in: 0...100,
      onEditingChanged: { editing in
             isEditing = editing
      })
Text("(speed)")
//当用户滑动时会显示红色，松手变蓝
   .foregroundColor(isEditing ? .red : .blue)
     

onEditingChanged监听一个正在操作的事件，用户按下滑动、滑动过程中代理editing变为true，松手切换成false。

3、minimumValueLabel 和 maximumValueLabel

这2个参数用来显示 Slider 的最大值（maximumValueLabel）和最小值（minimumValueLabel）。

 Slider(value: $speed3, in: 0...100,
       minimumValueLabel: Text("0"),//滑动开始显示最小值
       maximumValueLabel: Text("100")//滑动结尾显示最大值
){}

4、利用step控制滑动值

上面的滑动的值会出现小数点，如果我们控制每滑动一下是5的倍数就需要使用到这个参数了。

Slider(value: $speed, in: 0...100, step: 5)
      Text("(speed)")//step控制拖动的大小为5或者 的倍数

Slider滑块由一个“拇指”图像组成，用户可以在一个线性“轨迹”的两个极端之间移动。磁道的两端表示可能的最小值和最大值。当用户移动拇指时，滑块更新其绑定值。

二、Stepper 步进

Stepper 是一个执行递增和递减操作的控件。让用户可以对数量进行加减，构造 Stepper 的时候需要绑定 onIncrement 和 onDecrement。当您希望用户在递增或递减值时拥有粒度控制时，请使用步进控件。例如，你可以使用步进来:将值向上或向下更改1。、严格在规定范围内操作。在步进的可能值的范围内按特定的数量步进。

1、基本使用：

//先定义一组颜色值
let colors: [Color] = [.orange, .red, .gray, .blue,.green, .purple, .pink]
//定义一个监听变量默认为3（blue）
@State private var value = 3

然后创建一个步进实例，该实例在用户递增或递减步进时执行您提供的onIncrement闭包与onDecrement闭包。

Stepper(onIncrement: {
//onIncrement在增加时做的事
    value = (value + 1) % colors.count//改变value的值
},
    onDecrement: {
//onDecrement在递减时做的事
        value = (value + colors.count - 1) % colors.count
    }) {
    Text("值: (value) 颜色: (colors[value].description)")
}
.padding(5)
.background(colors[value])

使用此onIncrement初始化器可创建具有自定义标题的控件，当用户单击或点击步进器的递增或递减按钮时，该标题将执行您提供的闭包。

上面的示例使用一个数组来设置控件的背景颜色和标题标签，该数组包含许多颜色值、局部状态变量、value。当用户单击或点击步进器的递增或递减按钮时，SwiftUI执行更新值的相关闭包，对值进行包装以防止溢出。然后SwiftUI重新渲染视图，更新文本和背景颜色以匹配当前索引。

2、只能加/减

onIncrement 和 onDecrement 闭包是可以返回 nil，如果为 nil  相当于不能进行加或减操作。

Stepper(
    onIncrement: nil,//禁止加
    onDecrement: nil//禁止减
) {}//返回空包

3、利用step控制滑动值

Stepper 也可以设置 in 和 step，用于控制用户输入的范围和每一次增加的量。注意：in 需要是 CloseRange，也就是"..."。

Stepper(value: $value,
        in: 1...50,
        step: 5) {
    Text("值: (value)")
}

4、onEditingChanged监听用户点击事件

用法和上面的Slider一样，当用户按下时事件被触发。

Stepper("步进标题", onIncrement: nil, onDecrement: nil, onEditingChanged: { e in
    bgCloorState = e
})
.background(bgCloorState ? Color.blue : Color.red)

三、Toggle 切换开关

Toggle是一种在开和关状态之间切换的控件。通过提供isOn绑定和标签来创建切换。将isOn绑定到一个布尔属性，该属性确定切换是开启还是关闭。将标签设置为一个视图，该视图直观地描述切换状态之间的目的。例如:

// Toggle 需要绑定一个 Bool 用来记录其状态是开还是关
Toggle(isOn: $vibrateOnRing) {
    Text("来电振动")
}
//下面是绑定的值
@State private var vibrateOnRing = false

改变切换的样式：

可以通过 .toggleStyle 改变 Toggle 样式，注意：SwiftUI 提供的样式中，目前只有 SwitchToggleStyle 可以在 iOS 上使用，该样式和默认样式相同。

.toggleStyle(SwitchToggleStyle())

DefaultToggleStyle 默认的切换样式。

SwitchToggleStyle 显示前导标签和尾随开关的切换样式(和上面的默认相同)。

CheckboxToggleStyle 一种切换样式，显示一个复选框及其后的标签(仅MAC OS)。

这应该是给未来升级留下的接口，做为扩展知识了解，等新版的swiftUI出来再更新。

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/126