SwiftUI 基础组件 - Slider

在 SwiftUI 中，Slider 是一个显示滑动条的控件。它通常用于选择一个数值范围（例如音量或亮度调整）。Slider 组件支持最小值、最大值、步长、标签等属性配置。

基本使用

Slider 需要一个绑定的 Double 类型变量来存储和控制滑动条的当前值。

struct ContentView: View {
    @State private var sliderValue: Double = 50 // 滑动条的当前值

    var body: some View {
        VStack {
            Slider(value: $sliderValue, in: 0...100) // 范围是 0 到 100
                .padding()
            
            Text("Slider Value: \(Int(sliderValue))") // 显示当前值
        }
    }
}

在这个示例中，Slider 的范围是 0 到 100，并且 sliderValue 的值会随着用户的操作自动更新。效果图如下：

设置步长

可以设置步长，使 Slider 只能跳跃到特定的值。例如，将 Slider 的步长设置为 10，每次滑动都会以 10 为增量或减量。

Slider(value: $sliderValue, in: 0...100, step: 10)
    .padding()

在这个例子中，sliderValue 的值会以 10 为单位变化，每次滑动的增减值都是 10。大小范围仍然是 0 到 100。

自定义标签和范围

可以在 Slider 上方或下方添加描述性的标签，例如显示滑动条的最小值和最大值。

VStack {
    Text("Volume")
    Slider(value: $sliderValue, in: 0...100)
    HStack {
        Text("0")
        Spacer()
        Text("100")
    }
    .padding(.horizontal)
}
.padding()

效果图如下：

自定义颜色和样式

可以通过添加颜色来修改 Slider 的背景样式：

Slider(value: $sliderValue, in: 0...100)
    .accentColor(.green) // 将滑动条颜色设置为绿色
    .padding()

效果图如下：