SwiftUI基础学习日记（六）Slider、Stepper

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

大家好，我是小黑，一个还没秃头的程序员~~~

今天依然继续swiftUI基础控件中的各种选择器，话不多说，正文开始：

(一) Slider

Slide是一种从有界线性范围的值中选择值的控件。类似于UISlide的效果

属性/修饰符	说明
value	当前的值，binding
onEditingChanged	滑动监听
in	滑动的范围
step	步进
minimumValueLabel	最小值的标签
maximumValueLabel	最大值的标签

Slide是一条由两个端点连成的线，中间的点可以进行滑动，两端分别是最小值和最大值，可以将值绑定在binding变量上，以下例子展示了一个简单的滑动

 Slider(value: $speed,in: 0...100,
                           onEditingChanged: { editing in
                               isCanSlide = editing
                           } )

还可以使用step属性设置滑动条的增量步长，以下例子展示0-100，每次滑动以5进行增长，代码如下：

@State private var speed = 50.0
@State private var isEditing = false

var body: some View {
    Slider(
        value: $speed,
        in: 0...100,
        step: 5,
        onEditingChanged: { editing in
            isEditing = editing
        },
        minimumValueLabel: Text("0"),
        maximumValueLabel: Text("100")
    ) {
        Text("Speed")
    }
}

（二） Stepper

Stepper是一种执行递增和递减操作的控件。

属性/修饰符	说明
onIncrement	递增的逻辑函数
onDecrement	递减的逻辑函数
content	标签
in	范围

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

struct StepperView: View {
    @State private var value = 0
    let colors: [Color] = [.orange, .red, .gray, .blue,
                           .green, .purple, .pink]

    func incrementStep() {
        value += 1
        if value >= colors.count { value = 0 }
    }

    func decrementStep() {
        value -= 1
        if value < 0 { value = colors.count - 1 }
    }

    var body: some View {
        Stepper(onIncrement: incrementStep,
            onDecrement: decrementStep) {
            Text("Value: \(value) Color: \(colors[value].description)")
        }
        .padding(5)
        .background(colors[value])
    }

下面的例子展示了一个步进器，它显示了步长为step，步长为range定义的范围递增或递减的效果:

struct StepperView: View {
    @State private var value = 0
    let step = 5
    let range = 1...50

    var body: some View {
        Stepper(value: $value,
                in: range,
                step: step) {
            Text("Current: \(value) in \(range.description) " +
                 "stepping by \(step)")
        }
            .padding(10)
    }
}

今天的swiftUI学习分享就到这里，刚开始接触学的慢，但是希望可以吸收进去，为了以后的实战做准备，后面我会持续输出iOS开发笔记，感谢大家的阅读！