如何在SwiftUI中漂亮地绘制垂直线性仪表？

Question

我是 SwiftUI 的新手，最近刚刚开始为我的第一个项目而奋斗（它是关于可视化一些数据）。我喜欢 SwiftUI 中

Gauge

结构的外观，所以我想基于它设计视图。

现在，我想展示一个垂直线性仪表，但遇到了一些问题。这是我的代码的结果：

垂直线性仪表到底部的填充量很大，这看起来很奇怪。这是我的代码：

import SwiftUI

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: .top){
                VStack(alignment: .leading) {
                    Image(systemName: "airplane.departure")
                        .foregroundColor(.white)
                    Text("Speed")
                        .font(.title2)
                        .foregroundColor(.white)
                        .opacity(0.9)
                    Text("\(Int(val))")
                        .font(.largeTitle)
                        .foregroundColor(.white)
                }
                RotatedGauge()
            }
            .padding([.bottom, .top], 30)
            .padding([.horizontal], 20)
        }
        .frame(width: 200, height: 200)
        .background(.black.opacity(0.8))
        .cornerRadius(30)
//        .shadow(radius: 5)
    }
}

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

其中

RotatedGauge

班级是

struct RotatedGauge: View {
    @State var val: Float = 32.0
    @State var MinMax: (min: Float, max: Float) = (0, 50)
    
    var body: some View {
        VStack {
            Gauge(value: val, in: MinMax.min...MinMax.max) {
//                Image(systemName: "heart.fill")
//                    .foregroundColor(.red)
            } currentValueLabel: {
//                Text("\(Int(val))")
//                    .foregroundColor(Color.green)
            } minimumValueLabel: {
                Text("\(Int(MinMax.min))")
                    .foregroundColor(Color.green)
                    .rotationEffect(.degrees(90))
            } maximumValueLabel: {
                Text("\(Int(MinMax.max))")
                    .foregroundColor(Color.red)
                    .rotationEffect(.degrees(90))
            }
            .tint(Gradient(colors: [.green, .red]))
            .gaugeStyle(.accessoryLinear)
            .rotationEffect(.degrees(-90))
        }
    }
}

请原谅我糟糕的编码，但我真的很想知道我的代码出了什么问题。有没有一些方法可以做得更好？

我尝试了很多谷歌搜索，但没有一个结果给了我我所期望的。

Answer 1

旋转仪表时，您需要在旋转前水平调整其大小，然后在旋转后垂直调整其大小：

struct RotatedGauge: View {
    @State var val: Float = 32.0
    @State var MinMax: (min: Float, max: Float) = (0, 50)
    
    var body: some View {
        VStack {
            Gauge(value: val, in: MinMax.min...MinMax.max) {
                //                Image(systemName: "heart.fill")
                //                    .foregroundColor(.red)
            } currentValueLabel: {
                //                Text("\(Int(val))")
                //                    .foregroundColor(Color.green)
            } minimumValueLabel: {
                Text("\(Int(MinMax.min))")
                    .foregroundColor(Color.green)
                    .rotationEffect(.degrees(90))
            } maximumValueLabel: {
                Text("\(Int(MinMax.max))")
                    .foregroundColor(Color.red)
                    .rotationEffect(.degrees(90))
            }
            .frame(width: 160, height: 80) // horizontal size
            .rotationEffect(.degrees(-90))
            .frame(width: 80, height: 160) // resize after rotation
            .tint(Gradient(colors: [.green, .red]))
            .gaugeStyle(.accessoryLinear)
//            .border(Color.white)
        }
    }
}

可能还有另一种方法，但这可以解决问题。