SwiftUI无法使多行路径工作

如何解决SwiftUI无法使多行路径工作

我真的在为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,Color(#colorLiteral(red: 0.1176470588,green: 0.5647058824,blue: 1,Color(#colorLiteral(red: 0,blue: 0.5450980392,.yellow,Color(#colorLiteral(red: 1,green: 0.5490196078,green: 0.7647058824,Color(#colorLiteral(red: 0.5294117647,green: 0.8078431373,blue: 0.9803921569,])

    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

解决方法

我将提出以下替代方案-使模型更方便，并使用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,Color(#colorLiteral(red: 0.1176470588,green: 0.5647058824,blue: 1,Color(#colorLiteral(red: 0,blue: 0.5450980392,.yellow,Color(#colorLiteral(red: 1,green: 0.5490196078,green: 0.7647058824,Color(#colorLiteral(red: 0.5294117647,green: 0.8078431373,blue: 0.9803921569,])

    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
}