SwiftUI折线图标签与路径绘制顺序不符，如何调整使0W在底1000W在顶

问题原因 #

SwiftUI 视图默认采用左上角为坐标原点，Y轴向下数值递增的坐标系。你当前的逻辑中，line值从0到10递增时，计算出的Y坐标也会逐渐变大（位置逐渐靠下），但绑定的标签数值line*100W是同步递增的，就出现了数值越大位置越靠下的倒置问题。

修复方案 #

只需要修改Y坐标的计算逻辑，把Y值和line值的映射关系反转即可，修改后的完整代码如下：

GeometryReader { r in
    ZStack(alignment: .leading) { // 增加对齐规则避免水平位置偏移，适配性更强
        ForEach(0..<11) { line in
            Group {
                let lineFloat = CGFloat(line)
                // 核心修改：反转Y轴映射，line=0时对应视图底部，line=10对应视图顶部
                let y = r.size.height * (1 - lineFloat / 10.0)
                Path { path in
                    path.move(to: CGPoint(x: 0, y: y))
                    path.addLine(to: CGPoint(x: r.size.width, y: y))
                }.stroke(Color.gray)
                Text("\(line * 100)W")
                    // 调整偏移适配新坐标，Y轴数值可根据你需要的对齐效果微调
                    .offset(x: 10, y: y - 8)
            }
        }
    }
}

你原来的X轴偏移写的是-r.size.width + 250，这种硬编码写法适配性很差，按上面的方案给ZStack加alignment: .leading之后，直接给Text加小幅度的正X偏移即可，适配不同尺寸的视图。

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