Ios SwiftUI：如何用拇指移动滑块值

发布于07月08日

我想在SwiftUI中创建带有值标签的滑块.

我写了下面的代码.

struct SliderView: View {
    @State private var speed = 50.0
    var minValue: Double = 1
    var maxValue: Double = 100
    var body: some View {
        VStack {
            Text("\(speed,specifier: "%.f")")
                .foregroundColor(.blue)

            Slider(
                value: $speed,
                in: minValue...maxValue,
                step: 1
            ) {
                Text("Speed")
            } minimumValueLabel: {
                Text("\(minValue,specifier: "%.f")")
            } maximumValueLabel: {
                Text("\(maxValue,specifier: "%.f")")
            }

        }.padding()
    }
}

但我想用滑块拇指移动值标签.

我找不到任何属性将.frame设置为Y值.

Question:

如何使用拇指移动滑块值标签和使用拇指更改移动标签值.

推荐答案

这里的问题是，我们无法访问nob大小和位置(它们是私有的)，只能参考范围和当前值，这导致滑块的nob和悬停值之间出现一些错位.

无论如何，这里是使用对齐指南的可能方法.调到我留给你的nob大小.

使用Xcode 13.4/iOS 15.5测试

struct SliderView: View {
    @State private var speed = 50.0

    var minValue: Double = 1
    var maxValue: Double = 100

    var body: some View {
        HStack {
            Text("\(minValue,specifier: "%.f")")
            Slider(value: $speed, in: minValue...maxValue, step: 1)
                .alignmentGuide(VerticalAlignment.center) { $0[VerticalAlignment.center]}
                .padding(.top)
                .overlay(GeometryReader { gp in
                    Text("\(speed,specifier: "%.f")").foregroundColor(.blue)
                        .alignmentGuide(HorizontalAlignment.leading) {
                            $0[HorizontalAlignment.leading] - (gp.size.width - $0.width) * speed / ( maxValue - minValue)
                        }
                        .frame(maxWidth: .infinity, alignment: .leading)
                }, alignment: .top)
            Text("\(maxValue,specifier: "%.f")")
        }
        .padding()
    }
}

Test module on GitHub