SwiftUI Slider

用于从一段线性范围中选择一个值的控件

iOS 13.0+iPadOS 13.0+macOS 10.15+Mac Catalyst 13.0+watchOS 6.0+

滑块由用户在线性“轨道”的两个极端之间移动的“拇指”图像组成。轨道的末端代表最小和最大可能值。当用户移动拇指时，滑块会更新其边界值。

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

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

var body: some View {
    VStack {
        Slider(
            value: $speed,
            in: 0...100,
            onEditingChanged: { editing in
                isEditing = editing
            }
        )
        Text("\(speed)")
            .foregroundColor(isEditing ? .red : .blue)
    }
}

您还可以使用步进参数来提供沿滑块路径的增量步进。例如，如果您有一个范围为 0 到 100 的滑块，并且您将步长值设置为 5，则滑块的增量将为 0、5、10 等。以下示例显示了这种方法，并且还添加了可选的最小值和最大值标签。

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

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

当 VoiceOver 用户使用语音命令调整滑块时，滑块还使用步进来增加或减少值。