环形滑块（Circular Slider）：实现360度停止旋转及精准停值问题求助

Hey there! Let's work through your circular slider problems together. I see two key issues you're facing: the slider isn't stopping accurately at your target value (like 200 in your test), and you want it to halt completely once it reaches a full 360-degree rotation (which corresponds to your totalValue of 1000) and show custom text. Let's break down the fixes step by step.

First, Diagnose the Accuracy Problem #

The main reasons your slider is overshooting your target value are:

• Incorrect condition check: You're using angleValue >= 200 to trigger the stop, but angleValue is the knob's rotation degree value—not your calorie value. This mismatch means your stop logic isn't activating when it should.
• Missing value clamping: When calculating the value from the drag location, you aren't restricting it to stay within your desired upper limit, so it can jump past your target if the drag moves quickly.
• Critical missing gesture action: You weren't actually calling the change method during the drag gesture, which is why your values weren't updating correctly as you dragged.

Fix 1: Accurate Stop Logic & Value Clamping #

Let's rewrite your change method to fix these issues. We'll define a clear stop threshold (use 200 for testing, then swap to config.totalValue for the full 360-degree stop) and clamp the calculated value to ensure it never exceeds your limit:

private func change(location: CGPoint) {
    // 计算拖拽位置对应的向量与角度
    let vector = CGVector(dx: location.x, dy: location.y)
    let angle = atan2(vector.dy - (config.knobRadius + 10), vector.dx - (config.knobRadius + 10)) + .pi/2.0
    let fixedAngle = angle < 0.0 ? angle + 2.0 * .pi : angle
    
    // 计算对应的卡路里值
    var value = fixedAngle / (2.0 * .pi) * config.totalValue
    // 替换为config.totalValue即可实现360度停止
    let stopThreshold: CGFloat = 200.0
    
    // 达到阈值后，禁止向前拖拽（值增大）
    if calorieValue >= stopThreshold {
        if value > calorieValue {
            return
        }
    }
    
    // 钳制值，确保不低于最小值、不超过停止阈值
    value = value.clamped(to: config.minimumValue...stopThreshold)
    
    // 更新卡路里值与旋钮角度
    calorieValue = value
    angleValue = fixedAngle * 180 / .pi
}

Fix 2: Wire Up the Drag Gesture Correctly #

Update your knob's gesture to call the change method during drag—this is essential for real-time value updates:

.gesture(
    DragGesture(minimumDistance: 0.2)
        .onChanged { value in
            isDragging = true
            self.change(location: value.location)
        }
        .onEnded { _ in
            isDragging = false
        }
)

Fix 3: Show Custom Text at 360 Degrees #

Once you swap stopThreshold to config.totalValue (which equals 1000, corresponding to a full 360-degree rotation), add a conditional text view to your ZStack to display your custom message:

// 在ZStack中添加这段代码
if calorieValue >= config.totalValue {
    Text("已完成一圈！")
        .font(.title)
        .foregroundColor(.white)
        .padding(.top, 100)
}

Full Modified Code #

Here's the complete updated struct with all fixes applied:

struct CaloriesCircularSelector: View {
    @State var calorieValue: CGFloat = 0.0
    @State var angleValue: CGFloat = 0.0
    @State private var isDragging = false
    @State var prevCalorieValue: CGFloat = 0.0

    let config = ConfigCircular(
        minimumValue: 0.0,
        maximumValue: 999.0,
        totalValue: 1000.0,
        knobRadius: 15.0,
        radius: 125.0)

    var body: some View {
        ZStack {
            Circle()
                .fill(.red)
                .frame(width: config.radius * 2, height: config.radius * 2)
                .scaleEffect(1.2)
            
            Circle()
                .trim(from: 0.0, to: calorieValue/config.totalValue)
                .stroke(Color.blue, lineWidth: 15)
                .frame(width: config.radius * 2, height: config.radius * 2)
                .rotationEffect(.degrees(-90))
            
            Circle()
                .fill(isDragging ? Color.red : Color.blue)
                .frame(width: config.knobRadius * 2, height: config.knobRadius * 2)
                .padding(10)
                .offset(y: -config.radius)
                .rotationEffect(Angle.degrees(Double(angleValue)))
                .gesture(
                    DragGesture(minimumDistance: 0.2)
                        .onChanged { value in
                            isDragging = true
                            self.change(location: value.location)
                        }
                        .onEnded { _ in
                            isDragging = false
                        }
                )
            
            Text("\(String.init(format: "%.0f", calorieValue)) cals")
                .font(.system(size: 50))
                .foregroundColor(.white)
            
            // 360度时显示的自定义文本
            if calorieValue >= config.totalValue {
                Text("已完成一圈！")
                    .font(.title)
                    .foregroundColor(.white)
                    .padding(.top, 100)
            }
        }
        .onChange(of: self.calorieValue) { newValue in
            if newValue > prevCalorieValue {
                print("Moving forward")
            } else if newValue < prevCalorieValue {
                print("Moving backward")
            }
            prevCalorieValue = newValue
        }
    }

    private func change(location: CGPoint) {
        let vector = CGVector(dx: location.x, dy: location.y)
        let angle = atan2(vector.dy - (config.knobRadius + 10), vector.dx - (config.knobRadius + 10)) + .pi/2.0
        let fixedAngle = angle < 0.0 ? angle + 2.0 * .pi : angle
        
        var value = fixedAngle / (2.0 * .pi) * config.totalValue
        // 替换为config.totalValue即可实现360度停止
        let stopThreshold: CGFloat = config.totalValue
        
        // 达到阈值后禁止向前拖拽
        if calorieValue >= stopThreshold {
            if value > calorieValue {
                return
            }
        }
        
        // 兼容旧Swift版本：替换为 value = max(config.minimumValue, min(value, stopThreshold))
        value = value.clamped(to: config.minimumValue...stopThreshold)
        
        calorieValue = value
        angleValue = fixedAngle * 180 / .pi
    }
}

struct ConfigCircular {
    let minimumValue: CGFloat
    let maximumValue: CGFloat
    let totalValue: CGFloat
    let knobRadius: CGFloat
    let radius: CGFloat
}

Quick Notes #

• If you're using a Swift version older than 5.7, replace value.clamped(to:) with max(config.minimumValue, min(value, stopThreshold)).
• Setting stopThreshold to config.totalValue ensures the slider stops exactly at a full 360-degree rotation.

备注：内容来源于stack exchange，提问作者Swink