ios - LazyVGrid Items Overlap

Question

I need some help with understanding why there is overlap in landscape with my Swift LazyVGrid. This is mentioned as an issue in this article: https://swiftui-lab.com/impossible-grids/ but I haven't found a great work around in my code.

Here is the result in portrait mode on a simulated iPhone 11 Pro. Everything looks fine.

However, here is the result in landscape mode on the iPhone 11 Pro

The overlap is the issue, but I'm not sure how to add the appropriate spacing. The cards don't appear to flow all the way across the column.

Here is the corresponding code:

SetGameView

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()
                    }
                }
            }
        }
    }
}

CardView

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
}

Thank you in advance! Any help is appreciated.

Answer 1

等待大神答复