Slider

概述

Slider 是一个用于从有限线性范围内选择值的控件。它由一个"滑块"（thumb）和一条"轨道"（track）组成。轨道两端分别代表最小值和最大值，用户拖动滑块时，Slider 会更新绑定的值。

1struct Slider<Label, ValueLabel> where Label : View, ValueLabel : View

创建 Slider

基本用法

使用 init(value:in:) 初始化方法创建 Slider：

1@State private var speed = 50.0
2
3Slider(value: $speed, in: 0...100)

无障碍标签的 Slider

使用 init(value:in:label:) 初始化方法，可以为 Slider 提供无障碍标签，主要用途是无障碍访问（VoiceOver 朗读），而不是直接显示在页面上。：

1Slider(value: $speed, in: 0...100) {
2    Text("调整速度")
3}

步进 Slider

使用 step 参数使滑块吸附到固定的增量值：

1Slider(value: $fontSize, in: 5...50, step: 5) {
2    Text("字体大小")
3}

Note

当使用 step 参数时，iOS 26+ 会自动显示刻度标记（tick marks）。

范围标签的 Slider

使用 minimumValueLabel 和 maximumValueLabel 参数显示最小值和最大值标签：

1Slider(value: $brightness, in: 0...100, step: 5) {
2    Text("亮度")
3} minimumValueLabel: {
4    Image(systemName: "sun.min")
5} maximumValueLabel: {
6    Image(systemName: "sun.max")
7}

自定义刻度标记

自动刻度标记 (iOS 26+)

当使用 step 参数初始化 Slider 时，系统会自动显示刻度标记：

1// iOS 26+ 自动显示刻度
2Slider(value: $value, in: 0...10, step: 1)

自定义刻度标记 (iOS 26+)

使用 tick 或 ticks 参数自定义刻度标记：

 1// 使用 tick 参数自定义每个刻度
 2Slider(value: $percentage, in: 0...1) {
 3    Text("百分比")
 4} ticks: {
 5    SliderTickContentForEach(
 6        stride(from: 0.0, through: 1.0, by: 0.25).map { $0 },
 7        id: \.self
 8    ) { value in
 9        SliderTick(value) {
10            Text("\(Int(value * 100))%")
11        }
12    }
13}

修饰符

tint

修改 Slider 轨道填充颜色：

1Slider(value: $value, in: 0...100)
2    .tint(.orange)

foregroundStyle

修改最小/最大值标签的颜色：

1Slider(value: $value, in: 0...100)
2    .foregroundStyle(.red)

onEditingChanged

监听滑块编辑状态变化：

1@State private var isEditing = false
2
3Slider(value: $speed, in: 0...100) {
4    Text("速度")
5} onEditingChanged: { editing in
6    isEditing = editing
7    print("正在编辑: \(editing)")
8}

disabled

禁用 Slider：

1Slider(value: $value, in: 0...100)
2    .disabled(true)

完整示例

 1import SwiftUI
 2
 3struct SliderDemo: View {
 4    @State private var speed = 50.0
 5    @State private var isEditing = false
 6    
 7    var body: some View {
 8        Form {
 9            Section("基础用法") {
10                Slider(value: $speed, in: 0...100)
11                Text("当前值: \(Int(speed))")
12                    .foregroundColor(isEditing ? .red : .primary)
13            }
14            
15            Section("步进Slider") {
16                Slider(value: $speed, in: 0...100, step: 5) {
17                    Text("调整速度")
18                }
19            }
20            
21            Section("带标签") {
22                Slider(value: $speed, in: 0...100, step: 5) {
23                    Text("调整速度")
24                } minimumValueLabel: {
25                    Text("0")
26                        .font(.caption)
27                } maximumValueLabel: {
28                    Text("100")
29                        .font(.caption)
30                }
31            }
32            
33            Section("自定义样式") {
34                Slider(value: $speed, in: 0...100, step: 5) {
35                    Text("自定义颜色")
36                } minimumValueLabel: {
37                    Image(systemName: "tortoise")
38                } maximumValueLabel: {
39                    Image(systemName: "hare")
40                }
41                .tint(.orange)
42            }
43            
44            Section("编辑状态监听") {
45                Slider(value: $speed, in: 0...100) {
46                    Text("监听编辑状态")
47                } onEditingChanged: { editing in
48                    isEditing = editing
49                }
50            }
51        }
52    }
53}

平台支持

№	平台	最低版本
0	iOS	13.0+
1	iPadOS	13.0+
2	macOS	10.15+
3	tvOS	13.0+
4	watchOS	6.0+
5	visionOS	1.0+