使用两个轴时如何将 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 自动 centers 垂直和水平内部的任何内容。我在 ScrollView 中有一个大数据 table，我需要它与 top 对齐，但我不知道该怎么做。 Vstacks 和 Spacers 的常用内容在这里根本不起作用。

Answer 1

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

这通过确保 ScrollView 中的内容至少与 ScrollView 本身一样高来实现。这会导致内容填满整个垂直 space，因此它将从顶部开始。

代码：

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.

在同一行

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

How to align ScrollView content to top when both axes are used?

ios

swift

swiftui

scrollview

lazyvstack