SwiftUI ScrollView内容超出框架范围 顶部截断底部多余填充怎么修复

布局异常由ScrollView内部VStack使用的.position(x: geometry.size.width * 0.7)修饰符导致：

• position修饰符会将视图中心点锚定到父坐标系的指定坐标，脱离了正常布局流，导致ScrollView无法正确计算内部内容的实际尺寸，最终出现顶部内容被截断、底部多出多余空白的问题
• 你原本要实现的VStack右对齐效果，无需使用position，改用对齐类修饰符即可实现。

将原来的position修饰符替换为对齐相关设置即可，完整修改后的代码如下：

var body: some View {
    GeometryReader { geometry in
        ScrollView(.vertical){
            VStack{
                ForEach(samples, id: \.self) { sample in
                    if(sample.value(forKey: "asset") != nil){
                        NavigationLink(
                            destination: DetailView(sample: sample)){
                                let uiImage = UIImage(data: sample.value(forKey: "asset") as! Data)
                                Image(uiImage: uiImage!)
                                    .resizable()
                                    .scaledToFill()
                                    .aspectRatio(1, contentMode: .fill)
                                    .frame(width: 100, height: 100)
                                    .clipped() // 避免图片超出100*100的显示范围
                        }
                    }
                }
            }
            .padding()
            .background(Color.white.opacity(0.5))
            .frame(maxWidth: 200)
            // 替换原position修饰符，实现右对齐效果
            .frame(maxWidth: .infinity, alignment: .trailing)
            // 如果需要和原position效果完全一致的偏移量，可保留以下一行代码，不需要则删除
            .padding(.trailing, (geometry.size.width * 0.3) - 100)
        }
        .background(Color.blue.opacity(0.25))
        .frame(maxHeight: geometry.size.height)
        .environment(\.managedObjectContext, viewContext)
        .onAppear(perform: loadSamples)
    }
}

• 如果图片数量较多，可将VStack替换为LazyVStack，大幅提升滚动性能
• 可对sample的asset取值做可选绑定，避免强制解包可能出现的崩溃问题

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