Xcode中SwiftUI页面内容超出框架报错求助

我一直对应用开发充满兴趣，因此开始在Xcode中学习Swift。目前我正在开发一个在售车辆概览页面，但遇到了内容超出视图框架的问题。我尝试在VStack外层添加ScrollView来解决该问题，但并未奏效。

问题原因 #

1. ScrollView未占满可用空间：ZStack默认按子视图内容大小布局，导致ScrollView没有撑满屏幕高度，无法触发滚动逻辑。
2. 条目布局无容器包裹：ForEach循环内的车辆相关视图直接平铺，布局结构混乱，也会影响滚动区域的判断。

修改方案 #

给ScrollView添加全屏约束，同时用VStack包裹每个车辆条目：

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack{
            Color(.white)
                .ignoresSafeArea()
            ScrollView{
                VStack(alignment: .leading, spacing: 20.0)
                {
                    Text("推荐车型")
                        .font(.system(size: 36))
                        .fontWeight(.semibold)
                    
                    ForEach(0..<4) { index in
                        // 包裹每个车辆条目，保证布局独立
                        VStack(spacing: 12) {
                            Image("car")
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .cornerRadius(5)
                            HStack{
                                Text("145347km")
                                    .font(.caption)
                                    .padding(.vertical, 5.0)
                                    .padding(.horizontal, 10.0)
                                    .background(.gray)
                                    .cornerRadius(10)
                                Text("03/2018")
                                    .font(.caption)
                                    .padding(.vertical, 5.0)
                                    .padding(.horizontal, 10.0)
                                    .background(.gray)
                                    .cornerRadius(10)
                                Text("235kW(320PK)")
                                    .font(.caption)
                                    .padding(5.0)
                                    .padding(.horizontal, 7.0)
                                    .background(.gray)
                                    .cornerRadius(10)
                                
                            }
                            Text("TeslaModel S85 Performance 2015 | MARGE | Free Supercharge")
                                .font(.title2)
                                .fontWeight(.semibold)
                            Text("€ 24.800,-")
                                .font(.title)
                                .fontWeight(.heavy)
                        }
                    }
                    Text("最新添加")
                        .font(.system(size: 36))
                        .fontWeight(.semibold)
                    
                }
                .padding()
            }
            // 让ScrollView占满整个屏幕空间
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

修改后ScrollView就能正常滚动，内容也不会超出视图范围了。

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