如何让ScrollView内的VStack占据全部剩余空间？

问题核心在于：ScrollView的内容容器默认是自适应内容高度，不会主动继承父视图（屏幕）的高度限制，所以直接给内部子视图设置maxHeight: .infinity无法生效——因为ScrollView的内容高度没有被约束到屏幕高度，子视图也就没有"剩余空间"可以填充。

解决方案：约束ScrollView内容的最小高度为屏幕可用高度 #

我们可以通过GeometryReader获取当前屏幕的可用高度，然后将ScrollView内部的根VStack的最小高度设置为该值，这样就能让内容容器至少撑满屏幕高度，之后黄色VStack的maxHeight: .infinity就能生效，占据剩余空间。

修改后的代码如下：

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            ScrollView {
                VStack {
                    HStack {
                        Text("Title")
                            .font(.largeTitle)
                            .fontWeight(.bold)
                            .padding(.leading)

                        Spacer()
                    }

                    Spacer()
                        .frame(height: 60)

                    HStack(alignment: .center) {
                        Text("Header Text")
                    }
                    .frame(height: 60)
                    .frame(maxWidth: .infinity)
                    .background(Color.white)
                    .cornerRadius(6.5)
                    .padding(.horizontal)

                    Spacer()
                        .frame(height: 60)

                    // 现在这个VStack会占据剩余所有空间
                    VStack {
                        Text("ABC")
                        Text("DEF")
                    }
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(Color.yellow)
                }
                .frame(maxWidth: .infinity, minHeight: geometry.size.height)
            }
        }
        .background(Color.green.ignoresSafeArea())
    }
}

补充说明 #

• GeometryReader会获取当前父视图的可用尺寸（这里就是屏幕的安全区域内高度），保证内容容器的最小高度和屏幕一致。
• 如果需要忽略安全区域，可以把geometry.size.height换成UIScreen.main.bounds.height，但更推荐用GeometryReader，因为它能自动适配不同设备的安全区域变化。
• 这样设置后，当内容超过屏幕高度时，ScrollView依然可以正常滚动，同时黄色VStack在内容未填满屏幕时会自动撑满剩余空间。

内容的提问来源于stack exchange，提问作者meowmeowmeow