ios - 使用两个轴时如何将 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，我需要将它与顶部对齐，但我不知道该怎么做。通常带有Vstacks 和Spacers 的东西在这里根本不起作用。

Answer 1

我做了一个例子，用 aSlider这样你就可以交互式地测试它。

这是通过确保其中的内容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.