如何在SwiftUI中优雅绘制垂直线性Gauge？

原代码核心问题 #

• 数据不同步：RotatedGauge内部的val和MinMax是独立的@State变量，和父视图SingleValueVertical的状态完全脱节，导致Gauge显示值与左侧文本不一致。
• 布局留白异常：旋转水平Gauge后，原水平布局的容器尺寸未适配垂直方向，加上VStack默认间距，导致底部出现多余留白；同时最值标签的旋转逻辑有误，位置偏离预期。
• 结构冗余：RotatedGauge内部的VStack属于多余嵌套，徒增布局复杂度。
• 命名不规范：MinMax不符合Swift小驼峰命名规范，降低代码可读性。

优化后的实现方案 #

1. 数据绑定实现状态同步

将RotatedGauge的状态变量改为@Binding，从父视图传入数据，确保UI显示一致性：

struct RotatedGauge: View {
    @Binding var val: Float
    @Binding var minMax: (min: Float, max: Float)
    
    var body: some View {
        Gauge(value: val, in: minMax.min...minMax.max) {
        } currentValueLabel: {
        } minimumValueLabel: {
            Text("\(Int(minMax.min))")
                .foregroundColor(.green)
                .rotationEffect(.degrees(90))
        } maximumValueLabel: {
            Text("\(Int(minMax.max))")
                .foregroundColor(.red)
                .rotationEffect(.degrees(90))
        }
        .tint(Gradient(colors: [.green, .red]))
        .gaugeStyle(.accessoryLinear)
        // 指定旋转锚点，避免布局偏移
        .rotationEffect(.degrees(-90), anchor: .topLeading)
        // 固定尺寸适配垂直布局，消除留白
        .frame(width: 140, height: 20)
    }
}

2. 父视图调整布局与传值

修改父视图的对齐方式、间距，同时传入绑定值：

struct SingleValueVertical: View {
    @State var val: Float = 32.0
    @State var minMax: (min: Float, max: Float) = (0, 50)
    
    var body: some View {
        ZStack {
            HStack(alignment: .center, spacing: 16) {
                VStack(alignment: .leading, spacing: 8) {
                    Image(systemName: "airplane.departure")
                        .foregroundColor(.white)
                    Text("Speed")
                        .font(.title2)
                        .foregroundColor(.white)
                        .opacity(0.9)
                    Text("\(Int(val))")
                        .font(.largeTitle)
                        .foregroundColor(.white)
                }
                RotatedGauge(val: $val, minMax: $minMax)
            }
            .padding(20)
        }
        .frame(width: 200, height: 200)
        .background(.black.opacity(0.8))
        .cornerRadius(30)
    }
}

struct SingleValueVertical_Previews: PreviewProvider {
    static var previews: some View {
        SingleValueVertical()
    }
}

3. 额外优化说明

• 统一使用小驼峰命名规范，提升代码可读性。
• 调整HStack和VStack的spacing参数，让排版更紧凑美观。
• 移除冗余的VStack嵌套，简化布局结构。
• 旋转Gauge时指定anchor: .topLeading，确保旋转后的布局位置符合预期，彻底消除底部留白。

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