swiftui - 在 SwiftUI 中的 ScrollView 内滚动

Question

在一个巨大的 ScrollView 中，我想放置 Circles，然后滚动到它们，以便在滚动时它们一个接一个地出现在屏幕中间。

我可以使用 .position、.offset 或 .padding 来定位 Circles。我已将它们（300,300）放置在彼此远离的位置，因此当视图加载时它们都不会出现在屏幕上。

当我滚动到使用 .position 或 .offset 定位的位置时，ScrollView 会滚动到左上角。.offset 以插入方式滚动，.position 一直滚动。当我滚动到带有 .padding 的位置时，它没有居中。

我在这里做错了什么？为什么我的三个尝试都不会滚动以使有问题的圆圈位于 ScrollView 的中间？

struct CanvasTester: View {
    
    @State var i = 0
    
    var body: some View {
        ZStack(alignment: .topLeading) {
            ScrollViewReader { scrollView in
                ScrollView([.horizontal, .vertical]) {
                    ZStack(alignment: .topLeading) {
                        Spacer()
                            .frame(width: 4096, height: 4096)
                            .background(Color.yellow)
                            .task {
                                @Sendable func f() {
                                    DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
                                        withAnimation {
                                            scrollView.scrollTo("circle\(i+1)", anchor: .center)
                                            self.i = (self.i + 1) % 3
                                        }
                                        f()
                                    }
                                }
                                f()
                            }
                        
                        Circle()
                            .stroke(Color.blue, lineWidth: 4)
                            .frame(width: 44, height: 44)
                            .offset(x: 1500, y: 1500)
                            .id("circle1")

                        Circle()
                            .stroke(Color.green, lineWidth: 4)
                            .frame(width: 44, height: 44)
                            .position(x: 1800, y: 1800)
                            .id("circle2")

                        Circle()
                            .stroke(Color.red, lineWidth: 4)
                            .frame(width: 44, height: 44)
                            .padding([.top, .leading], 2100)
                            .id("circle3")
                    }
                }
            }

            Text("#\(i+1)")

        }
    }
}

快速浏览代码：我有一个 ScrollReader，它封装了一个 ScrollView，它可以双向滚动，大小为 4096x4096。它有一个黄色背景，在绘制时会启动一个函数，该函数每秒滚动到 ID 为“circle1”、“circle2”或“circle3”的视图。然后沿着带有这些标签的三个圆圈，最后是左上角的标签，表示 ID 的颜色编号。