SwiftUI：为什么这个 ScrollView 的内容错位了？

Question

以下示例代码应在 ScrollView 内生成一个 RoundedRectangle 网格。使用 NavigationBar 中的按钮，您可以更改行数和列数。它在 iPad 上效果最好，因为它的屏幕更大。

当您运行此代码时，您会看到（或者至少，我看到了）ScrollView 的内容没有很好地居中。当你添加一些行和列时，你看不到最上面和最左边的，并且在底部和右边有一些空白区域。

是否有更多人遇到此问题？有没有人找到解决方案？有人知道创建具有灵活宽度和高度的可滚动网格的另一种方法吗？

import SwiftUI

struct ContentView: View {
    @State var x: Int = 5
    @State var y: Int = 5
    var body: some View {
        NavigationView {
            ScrollView([.horizontal, .vertical]) {
                VStack(spacing: 8) {
                    ForEach(0 ..< self.y, id: \.self) { yCoor in
                        HStack(spacing: 8) {
                            ForEach(0 ..< self.x, id: \.self) { xCoor in
                                RoundedRectangle(cornerRadius: 10)
                                    .frame(width: 120, height: 120)
                                    .foregroundColor(.orange)
                                    .overlay(Text("(\(xCoor), \(yCoor))"))
                            }
                        }
                    }
                }
                .border(Color.green)
            }
            .border(Color.blue)
            .navigationBarTitle("Contents of ScrollView misplaced", displayMode: .inline)
            .navigationBarItems(
                leading: HStack(spacing: 16) {
                    Text("x:")
                        .bold()
                    Button(action: { if self.x > 0 { self.x -= 1 } }) {
                        Image(systemName: "minus.circle.fill")
                            .imageScale(.large)
                    }
                    Button(action: { self.x += 1 }) {
                        Image(systemName: "plus.circle.fill")
                            .imageScale(.large)
                    }
                },
                trailing: HStack(spacing: 16) {
                    Text("y:")
                        .bold()
                    Button(action: { if self.y > 0 { self.y -= 1 } }) {
                        Image(systemName: "minus.circle.fill")
                            .imageScale(.large)
                    }
                    Button(action: { self.y += 1 }) {
                        Image(systemName: "plus.circle.fill")
                            .imageScale(.large)
                    }
                }
            )
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

Answer 1

一些解决方法是将垂直轴和水平轴的滚动视图分开。

import SwiftUI

struct Row: View {
    var _y: Int
    var x: Range<Int>
    var body: some View {
        HStack {
            ForEach(x) { _x in
                RoundedRectangle(cornerRadius: 10).tag(_x)
                    .frame(width: 120, height: 120)
                    .foregroundColor(.orange)
                    .overlay(Text("(\(_x), \(self._y))"))
            }
        }
    }
}

struct Grid: View {
    var m: Int
    var n: Int

    var body: some View {
        ScrollView(.horizontal){
        ScrollView(.vertical) {
            ForEach(0 ..< n) { _y in
                Row(_y: _y, x: 0 ..< self.m)
            }
        }
        }
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Grid").font(.title)
            Grid(m: 5, n: 5)
        }
    }
}

它仍然不完美，但可以使用。 最好只使用一个滚动轴并填充第二个方向 具有正确数量的单元格。

我想念如何知道并能够调整滚动位置。 SwiftUI 处于非常早期的阶段，一旦它会更可靠，请耐心等待