如何修复由复合修饰符 + 动画引起的 SwiftUI 内存泄漏？

Question

如何修复在动画中使用复合修饰符时发生的内存泄漏？

在此示例中，我们有 4 个MySquareView具有动画旋转效果的方块，它们位于ContentView具有缩放修改器的 ZStack 中。正如您所看到的，正在使用的内存会随着时间的推移而不断增加。

同样的问题似乎也发生在其他修饰符上。完整示例：

import SwiftUI

struct MySquare: Identifiable, Hashable {
    var id = UUID()
    var offsetX: CGFloat
    var offsetY: CGFloat
}

struct MySquareView: View {
    @State private var rotateSquare = true
    var body: some View {
        Rectangle()
            .fill(Color.purple)
            .frame(width: 30, height: 30)
            .rotationEffect(.degrees(self.rotateSquare ? -25 : 25))
            .onAppear(perform: {
                withAnimation(Animation.easeInOut(duration: 2).repeatForever(autoreverses: true)) {
                    self.rotateSquare.toggle()
                }
            })
    }
}

struct ContentView: View {


    var mySquares = [
        MySquare(offsetX: -40, offsetY: 40),
        MySquare(offsetX: 50, offsetY: -20),
        MySquare(offsetX: -10, offsetY: 80),
        MySquare(offsetX: 110, offsetY: 20)
    ]

    var body: some View {
        VStack {
            ZStack {
                ForEach(mySquares, id: \.self) { mySquare in
                    MySquareView()
                        .offset(x: mySquare.offsetX, y: mySquare.offsetY)
                }
            }
            .scaleEffect(0.8)

        }
    }
}

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

Answer 1

这似乎与 ForEach 内的嵌入突变有关，查看内存图可能涉及 List（当其元素发生突变时，它似乎也存在内存泄漏）。我建议对此打开反馈。

可以通过删除 ForEach 来消除它：

func square(at offset: Int) -> some View {
    let mySquare = mySquares[offset]
    return MySquareView()
        .offset(x: mySquare.offsetX,
                y: mySquare.offsetY)
}

var body: some View {
    VStack {
        ZStack {
            square(at: 0)
            square(at: 1)
            square(at: 2)
            square(at: 3)
        }
        .scaleEffect(0.8)
    }
}

您还可以通过注入递归 AnyView 而不是使用 ForEach 来解决此问题。可能还有其他类似的巧妙解决方案；这可能值得进一步探索，因为同时丢失 ForEach 和 List 是相当令人讨厌的。

func loopOver<C: Collection, V: View>(_ list: C, content: (C.Element) -> V) -> AnyView
{
    guard let element = list.first else { return AnyView(EmptyView()) }
    return AnyView(Group {
        content(element)
        loopOver(list.dropFirst(), content: content)
    })
}

var body: some View {
    VStack {
        ZStack {
            loopOver(mySquares) { MySquareView().offset(x: $0.offsetX, y: $0.offsetY )}
        }
        .scaleEffect(0.8)
    }
}

（像这样使用 AnyView 会妨碍各种 SwiftUI 优化，因此这是最后的手段，但在这种情况下可能是必要的。）