LazyVGrid 忽略第一个元素的前导填充

Question

struct HomeView: View {
    @ObservedObject var viewModel = CarViewModel()
    let columns = Array(repeating: GridItem(.flexible(), spacing: 20, alignment: .center), count: 2)

var body: some View {
    GeometryReader { geometry in
        VStack{
            Text("Test")
            ScrollView {
                LazyVGrid(columns: columns, spacing: 20) {
                        ForEach(viewModel.cars) { car in
                            CarCard(car: car) {
                                viewModel.addToCart(car: car)
                            }
                        }
                    }
                .padding(20)
            }
        }
    }
}

我尝试了很多变体，但第一个元素的大小总是很混乱。如何修复像这样出现的第一个元素？

Answer 1

无法重现您的问题。请建议您下次使用最小的、可重现的示例而不是引用其他人没有的数据（图片）。

无论如何，您的通用代码似乎是正确的，因为下面的代码会产生一致的填充。请尝试一下。我想你的图片尺寸与此有关？

struct ContentView: View {
    
    let columns = Array(repeating: GridItem(.flexible(), spacing: 20, alignment: .center), count: 2)
    
    var body: some View {
        GeometryReader { geometry in
            VStack{
                Text("Test")
                ScrollView {
                    LazyVGrid(columns: columns, spacing: 20) {
                        ForEach(1...5, id:\.self) { number in
                            Text("\(number)")
                        }
                    }
                    .padding(20)
                }
            }
        }
    }