SwiftUI滑块视图组件Slider

在 SwiftUI 中，Slider 是一个常用的视图组件，用于用户调整数值（如音量、亮度等）。Slider 组件非常灵活，可以绑定一个数值状态，并设置值的范围和步长。

基本使用

import SwiftUI

struct SliderExample: View {
    @State private var value: Double = 0.5

    var body: some View {
        VStack {
            Slider(value: $value, in: 0...1) // 范围是 0 到 1
                .padding()
            Text("Value: \(value, specifier: "%.2f")") // 显示当前值，保留两位小数
        }
    }
}

#Preview {
    SliderExample()
}

设置最小值、最大值和步长

通过 in: 设置范围，通过 step: 设置步长。

import SwiftUI

struct SliderWithStep: View {
    @State private var value: Double = 5.0

    var body: some View {
        VStack {
            Slider(value: $value, in: 0...10, step: 1) // 每次递增或递减 1
                .padding()
            Text("Value: \(Int(value))") // 转换为整数显示
        }
    }
}

#Preview {
    SliderWithStep()
}

自定义滑块外观

自定义颜色

Slider(value: $value, in: 0...1)
    .accentColor(.red) // 设置滑块颜色
    .padding()

添加图标和样式

import SwiftUI

struct SliderWithIcons: View {
    @State private var volume: Double = 50.0

    var body: some View {
        HStack {
            Image(systemName: "speaker.fill")
            Slider(value: $volume, in: 0...100)
                .accentColor(.green)
            Image(systemName: "speaker.wave.3.fill")
        }
        .padding()
    }
}

#Preview {
    SliderWithIcons()
}

响应值变化

在 Slider 的值发生变化时，执行特定操作。

import SwiftUI

struct SliderOnChange: View {
    @State private var value: Double = 0.0

    var body: some View {
        VStack {
            Slider(value: $value, in: 0...100)
                .padding()
                .onChange(of: value) { _, newValue in
                    print("Slider value changed to \(newValue)")
                }
            Text("Value: \(Int(value))")
        }
    }
}

#Preview {
    SliderOnChange()
}

垂直滑块

通过旋转 Slider 实现垂直方向滑动。

import SwiftUI

struct VerticalSlider: View {
    @State private var value: Double = 0.5

    var body: some View {
        VStack {
            Slider(value: $value, in: 0...1)
                .rotationEffect(.degrees(-90)) // 旋转 90 度
                .frame(height: 300)           // 设置高度
                .padding()
            Text("Value: \(value, specifier: "%.2f")")
        }
    }
}

#Preview {
    VerticalSlider()
}

完整示例：滑块与动态颜色

滑块控制视图背景颜色的变化。

import SwiftUI

struct ColorSlider: View {
    @State private var red: Double = 0.5
    @State private var green: Double = 0.5
    @State private var blue: Double = 0.5

    var body: some View {
        VStack {
            RoundedRectangle(cornerRadius: 20)
                .fill(Color(red: red, green: green, blue: blue))
                .frame(height: 200)
                .padding()

            VStack {
                Text("Red: \(red, specifier: "%.2f")")
                Slider(value: $red, in: 0...1)
                    .accentColor(.red)
                Text("Green: \(green, specifier: "%.2f")")
                Slider(value: $green, in: 0...1)
                    .accentColor(.green)
                Text("Blue: \(blue, specifier: "%.2f")")
                Slider(value: $blue, in: 0...1)
                    .accentColor(.blue)
            }
            .padding()
        }
    }
}

#Preview {
    ColorSlider()
}

总结

Slider 是一个简单但功能强大的控件，支持范围和步长配置。

可以自定义滑块颜色、外观，甚至响应值变化。

通过结合其他视图，Slider 能实现丰富的交互效果。