当内容较小时，ScrollView 占据整个高度

Question

我是 Swift UI 的新手，我很难让特定的 UI 按我想要的方式运行。

我有一个包含一些内容的

ScrollView

。 VStack 中的内容可以小到 1-3 个文本组件，大到超过 60 个组件。

我希望滚动视图能够根据需要增长。一旦没有剩余空间，就继续使用最大可用高度并利用滚动。

问题来了，即使我有 6 个项目，

ScrollView

占据了整个高度并将文本推到了下面。您可以检查红色背景和被按下的“就在ScrollView下方”。

struct ContentTestView: View {
    var body: some View {
        VStack {
            // ScrollView should wrap content height...
            ScrollView {
                VStack(alignment: .leading) {
                    ForEach(0..<6) { index in
                        Text("Item \(index)")
                            .padding()
                            .background(Color.gray.opacity(0.3))
                            .cornerRadius(8)
                            .padding(.bottom, 4)
                    }
                }
                .frame(maxWidth: .infinity) // Fill max width
            }
            .background(.red)
            Text("Just right below the ScrollView")
            
            
            Spacer() // There should be a space if the scroll view content is not too big
            
            Text("Bottom")
                .padding()
                .frame(maxWidth: .infinity) // Fill max width
                .background(Color.blue)
                .foregroundColor(.white)
                .cornerRadius(8)
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentTestView()
    }
}

我尝试过使用

fixedSize()

，但这并不像我预期的那样工作，因为它会推动其他 VStack 同级，并且不会按照我想要的方式滚动。

这里的解决方案是什么？我希望

ScrollView

能够增长到所需的程度，一旦内容填满整个高度，它应该看起来像我向您展示的上一张图片。

在android上我可以通过在

.weight(1f, fill = false)

中使用

ScrollView

来实现，但这里没有类似的方法。

Answer 1

我要哭了，我在一些文章上找到了解决方案并进行了修改。 我在使用 Swift UI 时感到非常痛苦。我仍然需要习惯他们解决问题的方式，这应该更容易哈哈

在 ScrollView 内容中使用 GeometryReader 并将该大小保存在状态中。然后使用 ScrollView 中存储的尺寸高度。

struct ContentTestView: View {
    @State
    private var scrollViewContentSize: CGSize = .zero
    var body: some View {
        VStack {
            // ScrollView should wrap content height...
            ScrollView {
                VStack(alignment: .leading) {
                    ForEach(0..<5) { index in
                        Text("Item \(index)")
                            .padding()
                            .background(Color.gray.opacity(0.3))
                            .cornerRadius(8)
                            .padding(.bottom, 4)
                    }
                }
                .background(
                    GeometryReader { geo -> Color in
                        DispatchQueue.main.async {
                            scrollViewContentSize = geo.size
                        }
                        return Color.clear
                    }
                )
                .frame(maxWidth: .infinity) // Fill max width
            }
            .frame(
                maxHeight: scrollViewContentSize.height
            )
            .background(.red)
            Text("Just right below the ScrollView")
            
            
            Spacer()
            
            Text("Bottom")
                .padding()
                .frame(maxWidth: .infinity) // Fill max width
                .background(Color.blue)
                .foregroundColor(.white)
                .cornerRadius(8)
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentTestView()
    }
}