SwiftUI自定义线性仪表：如何实现圆形随数值移动？

你的问题出在configuration.value的取值范围上——这个值是0到1之间的浮点数，直接把它传给offset(x:)，最多只会让圆形移动1个点，自然看起来完全不动。

要实现圆形跟着数值平滑移动，需要把这个0-1的比例转换成实际的偏移距离，还要考虑胶囊的宽度和圆形自身的尺寸，避免圆形超出胶囊范围。下面是优化后的代码：

struct LightBarGaugeStyle: GaugeStyle {
    private let gradient = LinearGradient(colors: [.blue, .yellow, .orange, .red], startPoint: .leading, endPoint: .trailing)
    private let circleWidth: CGFloat = 20
    private let capsuleHeight: CGFloat = 30

    func makeBody(configuration: Configuration) -> some View {
        GeometryReader { geo in
            // 计算可移动的总宽度：胶囊宽度 - 圆形宽度，确保圆形两端不会超出胶囊
            let maxOffsetX = geo.size.width - circleWidth
            
            VStack(alignment: .leading, spacing: 0) {
                Circle()
                    .frame(width: circleWidth)
                    .foregroundColor(.blue)
                    // 把0-1的数值比例转换成实际偏移量
                    .offset(x: configuration.value * maxOffsetX)
                
                Capsule()
                    .fill(gradient)
                    .frame(height: capsuleHeight)
                    .overlay(
                        Capsule()
                            .stroke(lineWidth: 2)
                            .foregroundColor(.black)
                    )
            }
        }
        // 给Gauge设置一个基础宽度，避免自适应过窄
        .frame(width: 300)
    }
}

关键改动说明：

• 用GeometryReader获取容器的实际宽度，替代硬编码的1000，适配不同设备和布局
• 计算maxOffsetX：胶囊的总宽度减去圆形自身的宽度，这样圆形的边缘能刚好对齐胶囊的两端
• 将configuration.value乘以maxOffsetX，把0-1的比例转换成实际的偏移像素值

如果希望圆形的中心对齐胶囊的两端，可以把偏移量调整为configuration.value * maxOffsetX + circleWidth/2，根据你的视觉需求调整即可。

内容的提问来源于stack exchange，提问作者Nicola Rigoni