Swift LazyVGrid横屏布局重叠问题技术求助

Hey there, let's tackle that frustrating card overlap issue you're seeing when your iPhone 11 Pro simulator switches to landscape! I've got a few targeted fixes that should get your grid behaving as expected.

First: The Root Cause of Your Problem #

Looking at your columnLayout definition, you've added four separate GridItem(.adaptive(minimum: 50)) entries—and that's where the confusion happens. The .adaptive layout modifier is designed to automatically generate as many columns as fit the available space, based on your minimum width. Adding multiple .adaptive items messes with the grid's column calculation logic, leading to overlapping cards when the screen widens in landscape.

Step 1: Fix the Column Layout #

Replace your manual column array with a single .adaptive (or dynamically sized) grid item to let SwiftUI handle column count automatically:

// Option 1: Simple adaptive layout (automatically adjusts column count)
var columnLayout: [GridItem] {
    [GridItem(.adaptive(minimum: 100), spacing: 10)]
}

// Option 2: Dynamic minimum width (fits 5 columns max, adjusts for screen size)
var columnLayout: [GridItem] {
    [GridItem(.flexible(minimum: UIScreen.main.bounds.width / 5), spacing: 10)]
}

Both options will ensure columns scale correctly with screen width—no more overlapping cards in landscape.

Step 2: Ensure Cards Fill Column Width #

Your CardView uses .aspectRatio(contentMode: .fill) which can cause cards to overflow their column bounds. Update the view to explicitly fill the column width while maintaining aspect ratio:

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)
                    )
                    .opacity(0.3)
                CardFigureView(card: card)
                    .padding(padding)
                    .opacity(card.isFaceUp ? 1 : 0.1)
            } else {
                Image("BackCard").resizable()
            }
        }
        .padding(padding)
        .frame(maxWidth: .infinity) // Force card to fill column width
        .aspectRatio(aspectRatio, contentMode: .fit) // Maintain correct proportions without overflow
    }
    
    private let lineWidth: CGFloat = 1
    private let padding: CGFloat = 10
    private let aspectRatio: CGFloat = 2/3
}

The .frame(maxWidth: .infinity) makes sure each card stretches to fit its column, and .fit ensures the card scales proportionally without clipping.

Step 3: Clean Up GeometryReader Placement #

You wrapped the entire ScrollView in a GeometryReader, which can restrict the scroll view's ability to adapt to screen width. Move the GeometryReader inside the scroll view so it only affects your transition animation:

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

Final Notes #

These changes should resolve the overlap issue and ensure your cards fill their columns correctly in both portrait and landscape. The key was letting SwiftUI handle column sizing with .adaptive instead of manually forcing columns, and making sure your cards respect their container bounds.

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