ios - SwiftUI无法使多行路径工作

Question

我真的在为SwiftUI Path函数苦苦挣扎。我正在尝试一个
一年中每一天的温度垂直线。线的最高点是
当天的高温，最低点为当天的低温。
我什至看过雷·温德里奇(Ray Wendelich)的例子，这是灵感，但我根本无法
它起作用。
https://www.raywenderlich.com/6398124-swiftui-tutorial-for-ios-creating-charts
经过无奈之后，我创建了这个简单的代码进行测试(并证明该问题
不是我的解码数据)。

struct ContentView: View {
    @State private var things365: [Thing] = []
    let myGradient = Gradient(colors: [
        Color(#colorLiteral(red: 0.5450980392, green: 0, blue: 0, alpha: 1)),
        Color(#colorLiteral(red: 0.7450980544, green: 0.1568627506, blue: 0.07450980693, alpha: 1)),
        Color(#colorLiteral(red: 0.1176470588, green: 0.5647058824, blue: 1, alpha: 1)),
        Color(#colorLiteral(red: 0, green: 0, blue: 0.5450980392, alpha: 1)),
        .yellow,
        Color(#colorLiteral(red: 1, green: 0.5490196078, blue: 0, alpha: 1)),
        Color(#colorLiteral(red: 0, green: 0.7647058824, blue: 1, alpha: 1)),
        Color(#colorLiteral(red: 0.5294117647, green: 0.8078431373, blue: 0.9803921569, alpha: 1)),
    ])

    var body: some View {
        ZStack {
            VStack(alignment: .leading) {
                Text("Show the Path")
                //put some other data here
                HStack  {
                    ForEach(things365, id: \.self) { t in
                        Path { p in
                            p.move(to: CGPoint(x: t.inc, y: CGFloat((t.maxt as NSString).doubleValue)))
                            p.addLine(to: CGPoint(x:t.inc, y: CGFloat((t.mint as NSString).doubleValue) + 500))
                        }
                        .stroke(LinearGradient(gradient: self.myGradient, startPoint: UnitPoint(x: 0.0, y: 1.0), endPoint: UnitPoint(x: 0.0, y: 0.0)))
                    }
                    .frame(width: 1)
                }
            }
        }
        .frame(width: 365, height: 600)
        .onAppear {
            self.makeThings()
        }
    }

    //simulate a years worth of temperature data
    func makeThings() {
        for x in 1...365 {
            let t = Thing(maxt: String(Int.random(in: 70..<110)), mint: String(Int.random(in: 0..<40)), inc: CGFloat(x))
            self.things365.append(t)
        }
    }
}

struct Thing: Hashable {
    let id = UUID()
    var maxt: String
    var mint: String
    var inc: CGFloat
}

这就是我要的:

这是我得到的:

任何指导将不胜感激。 Xcode 11.6，iOS 13.6

Answer 1

我将提出以下替代方案-使模型更方便，并使用Rectangle代替Path，还进行了一些修复(因为我们已经反转了坐标)。

struct TestTempGraph: View {
    @State private var things365: [Thing] = []
    let myGradient = Gradient(colors: [
        Color(#colorLiteral(red: 0.5450980392, green: 0, blue: 0, alpha: 1)),
        Color(#colorLiteral(red: 0.7450980544, green: 0.1568627506, blue: 0.07450980693, alpha: 1)),
        Color(#colorLiteral(red: 0.1176470588, green: 0.5647058824, blue: 1, alpha: 1)),
        Color(#colorLiteral(red: 0, green: 0, blue: 0.5450980392, alpha: 1)),
        .yellow,
        Color(#colorLiteral(red: 1, green: 0.5490196078, blue: 0, alpha: 1)),
        Color(#colorLiteral(red: 0, green: 0.7647058824, blue: 1, alpha: 1)),
        Color(#colorLiteral(red: 0.5294117647, green: 0.8078431373, blue: 0.9803921569, alpha: 1)),
    ])

    let plotHeight = CGFloat(600)

    var body: some View {
        ZStack {
            VStack(alignment: .leading) {
                Text("Show the Path")
                //put some other data here
                HStack(spacing: 0)  {
                    ForEach(things365, id: \.self) { t in
                        Rectangle()
                            .stroke(LinearGradient(gradient: self.myGradient, startPoint: UnitPoint(x: 0.0, y: 0.0), endPoint: UnitPoint(x: 0.0, y: 1.0)))
                            .frame(width: 1, height: t.maxt - t.mint)
                            .position(y: plotHeight - t.mint - (t.maxt - t.mint) / 2.0)
                    }
                }
                .frame(width: 365, height: plotHeight)
            }
        }
        .onAppear {
            self.makeThings()
        }
    }

    //simulate a years worth of temperature data
    func makeThings() {
        for x in 1...365 {
            let t = Thing(maxt: CGFloat.random(in: 70..<110), mint: CGFloat.random(in: 0..<40), inc: CGFloat(x))
            self.things365.append(t)
        }
    }
}

struct Thing: Hashable {
    let id = UUID()
    var maxt: CGFloat
    var mint: CGFloat
    var inc: CGFloat
}