LazyVGrid首个元素左侧内边距丢失、尺寸异常问题求助

问题根源 #

代码中GeometryReader的滥用是导致首个卡片布局错乱的核心原因——它会强制子视图填充整个可用空间，干扰了ScrollView和LazyVGrid的自动布局逻辑。此外，卡片内图片未做裁剪处理，也可能加剧布局偏移问题。

修复方案 #

以下是调整后的完整代码：

修改后的HomeView

struct HomeView: View {
    @ObservedObject var viewModel = CarViewModel()
    // 列配置：保持flexible布局，统一列间距与grid内边距
    let columns = Array(repeating: GridItem(.flexible(), spacing: 20, alignment: .center), count: 2)

    var body: some View {
        VStack{
            Text("Test")
            ScrollView {
                LazyVGrid(columns: columns, spacing: 20) {
                    ForEach(viewModel.cars) { car in
                        CarCard(car: car) {
                            viewModel.addToCart(car: car)
                        }
                    }
                }
                .padding(20)
            }
        }
        // 若需要全屏布局，可在此添加.frame(maxWidth: .infinity, maxHeight: .infinity)，而非用GeometryReader包裹
    }
}

修改后的CarCard

struct CarCard: View {
    let car: Car
    let action: () -> Void
    @StateObject private var imageLoader = ImageLoader()

    var body: some View {
        VStack(alignment: .leading) {
            if let uiImage = imageLoader.image {
                Image(uiImage: uiImage)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(maxWidth: .infinity, maxHeight: 200)
                    .clipped() // 添加裁剪，防止图片溢出容器
            } else {
                ProgressView()
            }
            Text("\(car.price ?? "")₺")
                .font(.headline)
                .padding(.vertical, 4)
                .foregroundStyle(.accent)
            
            Text(car.name ?? "")
                .font(.subheadline)
            
            Text(car.model ?? "")
                .font(.subheadline)
            
            Spacer()
            
            Button(action: action) {
                Text("Add to Cart")
                    .frame(maxWidth: .infinity)
                    .foregroundColor(.white)
                    .padding()
                    .background(Color.accentColor)
                    .cornerRadius(5)
            }
        }
        .onAppear{
            if let image = car.image {
                imageLoader.loadImage(from: image)
            }
        }
        .padding()
        .background(Color.white)
        .cornerRadius(10)
        .shadow(radius: 5)
    }
}

关键调整说明 #

• 移除GeometryReader：SwiftUI视图默认会自适应父容器大小，无需用GeometryReader强制占满空间，它会破坏ScrollView的内部布局计算。
• 添加图片裁剪：.clipped()确保图片严格在frame范围内显示，避免溢出导致的布局偏移。
• 保持布局一致性：列间距spacing:20与LazyVGrid的padding(20)匹配，确保所有卡片的内外边距统一。

内容的提问来源于stack exchange，提问作者Tayfun Sağdıç