ios - LazyVGrid 项目重叠

Question

我需要一些帮助来理解为什么我的 Swift LazyVGrid 在景观中存在重叠。这是本文中提到的一个问题：https ://swiftui-lab.com/impossible-grids/但我在我的代码中没有找到很好的解决方法。

这是模拟 iPhone 11 Pro 纵向模式下的结果。一切看起来都很好。

但是，这是 iPhone 11 Pro 横向模式下的结果

重叠是问题，但我不确定如何添加适当的间距。卡片似乎并没有流过柱子。

下面是对应的代码：

设置游戏视图

struct SetGameView: View {
    @ObservedObject var viewModel : SetGameViewModel
    
    var columnLayout = [GridItem(.adaptive(minimum: 50), spacing: 10),
                        GridItem(.adaptive(minimum: 50), spacing: 10),
                        GridItem(.adaptive(minimum: 50), spacing: 10),
                        GridItem(.adaptive(minimum: 50), spacing: 10)]
    
    var body: some View {
        VStack {
            GeometryReader { geometryReader in
                ScrollView {
                    LazyVGrid(columns: columnLayout, spacing: 10) {
                        ForEach(viewModel.inPlay) { card in
                            CardView(card: card)
                                .animation(.easeInOut(duration: 0.6))
                                .onTapGesture {
                                    withAnimation(.easeInOut(duration: 1)) {
                                        self.viewModel.chooseCard(card: card)
                                    }
                                }
                                .scaleEffect(card.isSelected ? CGFloat(1.05) : 1)
                                .transition(.offset(CGSize(width: 0, height: geometryReader.size.height)))
                        }
                    }
                }
                .onAppear {
                    withAnimation {
                        self.viewModel.dealInitialCards()
                    }
                }
            }
        }
    }
}

卡片视图

struct CardView: View {
    var card : SetCard
    var played = true
    
    var body: some View {
        ZStack {
            if card.isFaceUp {
                Rectangle()
                    .fill(Color.gray)
                    .overlay(
                        Rectangle()
                            .stroke(lineWidth: lineWidth)
                            .foregroundColor(.blue)
                            .opacity(card.isSelected ? 0.8 : 0)
                    )
                    .aspectRatio(aspectRatio, contentMode: .fill)
                    .opacity(0.3)
                
                CardFigureView(card: card)
                    .padding(padding)
                    .opacity(card.isFaceUp ? 1 : 0.1)
            } else {
                Image("BackCard").resizable().aspectRatio(aspectRatio, contentMode: .fill)
            }
        }
        .padding(padding)
    }
    
    private let lineWidth: CGFloat = 1
    private let padding: CGFloat = 10
    private let aspectRatio: CGFloat = 2/3
}

先感谢您！任何帮助表示赞赏。