如何使 ScrollView 中的项目在 SwiftUI 中占据整个屏幕的高度？答案

【问题标题】：How to make an item in ScrollView take up the height of the entire screen in SwiftUI?如何使 ScrollView 中的项目在 SwiftUI 中占据整个屏幕的高度？
【发布时间】：2021-12-31 11:47:17
【问题描述】：

我正在使用 SwiftUI 开发一个 watchOS 应用。这是我第一次使用 SwiftUI 并开发 watchOS 应用。

我想创建一个ScrollView，其中包含 2 个视图，每个视图的高度应与整个屏幕相同。

import SwiftUI

struct ScrollViewContainer_swift: View {
    var body: some View {
        ScrollView {
            DetailView()
            DetailView()
        }
    }
}

struct ScrollViewContainer_swift_Previews: PreviewProvider {
    static var previews: some View {
        ScrollViewContainer_swift()
    }
}

import SwiftUI

struct DetailView: View {
    var body: some View {
        VStack {
            Spacer()
            Text("This should take up the height of the entire screen.")
            Spacer()
        }
        .ignoresSafeArea(.container, edges: .all)
        .background(Color.blue)
    }
}

struct DetailView_Previews: PreviewProvider {
    static var previews: some View {
        DetailView()
    }
}

使用ignoresSafeArea，我可以制作一个DetailView 来占据整个高度。 DetailView_Previews 的结果如下所示：

但是，如果我把它放入ScrollView，DetailViews 似乎会缩小到最小高度：

我尝试了以下方法，但这些方法似乎都不起作用。

DetailView().frame(maxHeight: .infinity)
DetailView().ignoresSafeArea()
ScrollView().ignoresSafeArea()

像DetailView().frame(height: 170) 这样强制视图的高度与我想要实现的效果相似，但它显然无法适应各种屏幕尺寸。

还有什么我可以尝试的吗？

谢谢。

【问题讨论】：

你能加入minimal reproducible example吗？现在，人们必须检查并替换代码中的所有……才能获得一个编译示例来进行试验。
@jnpdx 我的错。我包含了一个最小的可重现示例并重写了帖子。谢谢你的建议。请让我知道是否还有其他需要包含的内容。

标签： ios swift swiftui watchos

【解决方案1】：

在您当前的代码中，ScrollView 将占用 one 屏幕中的所有可用空间。然后，DetailView 将只占用它需要的空间。即使使用Spacers，它也不会垂直扩展，因为ScrollView 没有对其施加大小限制。

为了使DetailViews 成为屏幕的大小，您可以使用GeometryReader，然后将高度传递给子视图：

struct ContentView : View {
    var body: some View {
        GeometryReader { proxy in
            ScrollView {
                VStack(spacing: 0) {
                    DetailView().frame(height: proxy.size.height)
                    DetailView().frame(height: proxy.size.height)
                }
            }
        }.ignoresSafeArea()
    }
}

struct DetailView: View {
    var body: some View {
        VStack {
            Spacer()
            Text("This should take up the height of the entire screen.")
            Spacer()
        }
        //.frame(maxWidth: .infinity) //add this if you want the view to extend to the horizontal edges
        .background(Color.blue)
    }
}

【讨论】：