75142913在线留言
【SwiftUI基础篇】12 取值器Slider(滑动取值)、Stepper(步进)、Toggle(切换)_IOS开发_网络人

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

Kwok 发表于:2021-04-03 14:03:08 点击:0 评论: 0

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出来再更新。

除非注明,网络人的文章均为原创,转载请以链接形式标明本文地址:http://www.neter8.com/ios/126.html
标签:取值器Kwok最后编辑于:2021-04-06 10:06:54
0
感谢打赏!

《【SwiftUI基础篇】12 取值器Slider(滑动取值)、Stepper(步进)、Toggle(切换)》的网友评论(0)

本站推荐阅读

热门点击文章