使用两个轴时如何将 ScrollView 内容对齐到顶部？

Question

这是一个简单的例子：

struct Example: View {
    var body: some View {
        ScrollView([.horizontal, .vertical], showsIndicators: false, content: {
            LazyVStack(content: {
                ForEach(1...10, id: \.self) { count in
                    Text("Item \(count)")
                }
            })
        })
    }
}

问题在于，当同时使用两个轴 ([.horizontal, .vertical]) 时，ScrollView 会自动居中 垂直和水平方向的任何内容。我在ScrollView 中有一个大数据表，我需要将它与 top 对齐，但我不知道该怎么做。带有Vstacks 和Spacers 的通常的东西在这里根本不起作用。

Answer 1

我做了一个例子，带有Slider，所以你可以交互式地测试它。

确保ScrollView 中的内容至少与ScrollView 本身一样高。这会导致内容填充整个垂直空间，因此它将从顶部开始。

代码：

struct Example: View {
    @State private var count: Double = 10

    var body: some View {
        VStack {
            GeometryReader { geo in
                ScrollView([.horizontal, .vertical], showsIndicators: false, content: {
                    VStack(spacing: 0) {
                        LazyVStack {
                            ForEach(1 ... Int(count), id: \.self) { count in
                                Text("Item \(count)")
                            }
                        }

                        Spacer(minLength: 0)
                    }
                    .frame(width: geo.size.width)
                    .frame(minHeight: geo.size.height)
                })
            }

            Slider(value: $count, in: 10 ... 100)
        }
    }
}

在某些情况下，您可能需要使用.frame(minWidth: geo.size.width) 而不仅仅是width。这可以与minHeight 在同一行。