SwiftUI中Padding导致虚线显示异常的原因及解决办法

问题背景 #

我通过自定义MyLine Shape给SwiftUI视图背景添加贯穿虚线，实现代码如下：

// MyLine的path实现
var path = Path()
path.move(to: CGPoint(x: rect.midX, y: rect.midY))
path.addLine(to: CGPoint(x: rect.maxX, y: rect.midY))
path.addLine(to: CGPoint(x: rect.minX, y: rect.midY))

return path

通过.stroke(style: StrokeStyle(dash: [10]))设置虚线样式，再用background修饰符添加到视图背景。不加Padding时一切正常，但只要添加任意Padding，虚线就会变得不对称：

• 添加Padding前：虚线左右对称，均匀分布
• 添加Padding后：虚线左右不对称，一侧短一截

最小复现示例：

import SwiftUI

struct MyLine: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.move(to: CGPoint(x: rect.midX, y: rect.midY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.midY))
        path.addLine(to: CGPoint(x: rect.minX, y: rect.midY))
        
        return path
    }
}

struct MyLineTest: View{
    var body: some View {
        VStack{
            MyLine()
                .stroke(style: StrokeStyle(dash: [10]))
        }.frame(height: 60)
            .padding() // 移除此行可修复虚线问题
    }
}

struct MyLine_Previews: PreviewProvider {
    static var previews: some View {
        MyLineTest()
            .foregroundColor(.black)
    }
}

问题原因 #

当前的路径是从容器中点出发，先绘制到右边缘再折返到左边缘，这种往返路径会让虚线的起始点落在中线位置。添加Padding后，容器尺寸变化，虚线的循环起始位置无法对齐容器左边缘，加上往返路径的特性，最终导致视觉上的不对称。

修复方案 #

修改MyLine的路径实现，直接绘制一条从左边缘中点到右边缘中点的直线，让路径是单一方向的线段，这样虚线会从左到右均匀分布，无论是否添加Padding都能保持对称。

修改后的代码：

struct MyLine: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        // 直接从左中点画到右中点
        path.move(to: CGPoint(x: rect.minX, y: rect.midY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.midY))
        
        return path
    }
}

测试修改后的MyLineTest视图，即使保留.padding()，虚线也会保持左右对称的状态。

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