SwiftUI中如何让ScrollView中的item占满整个屏幕的高度？

Question

我正在使用 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 中，DetailView 似乎会缩小到最小高度：

我尝试了以下方法，但其中 none 似乎可以解决问题。

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

像DetailView().frame(height: 170)那样强制view的高度和我想达到的效果差不多，但是显然不能适配各种屏幕尺寸。

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

谢谢。

Answer 1

在您当前的代码中，ScrollView 将占用一个屏幕中所有可用的 space。然后，DetailView 将只占用它需要的 space。即使使用 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)
    }
}

SwiftUI中如何让ScrollView中的item占满整个屏幕的高度？

How to make an item in ScrollView take up the height of the entire screen in SwiftUI?

ios

swift

watchos

swiftui