SwiftUI中使用for循环创建多条路径不生效是什么原因？

问题分析 #

你的代码存在4个核心错误：

• Shape 结构体中不应该使用@State属性包装器：@State是专为SwiftUI View设计的状态存储，在path(in:)方法中修改@State属性不会生效，应该把缩放乘数改为方法内的局部变量。
• 椭圆缩放锚点错误：CGAffineTransform的缩放默认以坐标原点（矩形左上角）为锚点，直接缩放会导致椭圆全部偏移到左上角，无法居中显示在矩形内部。
• 路径重复添加：你每次循环都往newPath中新增椭圆，再把整个newPath加入总路径，会导致小椭圆被重复添加多次。
• 最终缩放系数超出边界：按当前初始值+步长计算，循环结束后乘数会达到1.75，最大的椭圆会超出矩形范围。

修正后可运行代码 #

import SwiftUI

struct ContentView: View {
    var body: some View {
        MyShape()
            .stroke()
            .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct MyShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        // 先添加外层矩形
        path.addRect(rect)
        
        // 缩放系数改为局部变量，初始0.2，步长0.15，循环6次最终到1，刚好贴合矩形边界
        var horizontalMultiplier: CGFloat = 0.2
        var verticalMultiplier: CGFloat = 0.2
        
        for _ in 0...5 {
            // 先平移到矩形中心，再做缩放，保证椭圆居中
            let transform = CGAffineTransform(translationX: rect.midX, y: rect.midY)
                .scaledBy(x: horizontalMultiplier, y: verticalMultiplier)
                .translatedBy(x: -rect.midX, y: -rect.midY)
            // 每次循环单独生成椭圆路径，直接加入总路径
            path.addEllipse(in: rect, transform: transform)
            
            horizontalMultiplier += 0.15
            verticalMultiplier += 0.15
        }
        return path
    }
}

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