SwiftUI中LazyVGrid内容变化时行上移问题求助

问题 #

制作卡片匹配游戏原型，完成网格搭建与卡片翻面功能后，在iPhone14预览中布局为两行（第一行a-e，第二行仅f）。点击卡片a翻转时，第二行会向上偏移，推测是卡片内容移除导致压缩，但不确定原因，希望通过调整卡片内容或LazyVGrid解决偏移。

原因 #

卡片翻面时，Text(content)被完全移除，导致CardView内部布局出现微小尺寸变化。由于LazyVGrid的行高是根据该行内元素尺寸动态计算的，第二行只有一个卡片，其尺寸变化会直接带动整行高度调整，从而出现偏移。

解决方案 #

方法1：保持卡片内部尺寸一致（推荐） #

不管卡片是否翻面，都保留Text元素，仅通过透明度隐藏，确保卡片布局尺寸始终不变：

struct CardView: View {
    var content: String
    @State var isFaceUp: Bool = true
    var body: some View {
        ZStack {
            let shape = RoundedRectangle(cornerRadius: 20)
            shape.fill().foregroundColor(isFaceUp ? .white : .red)
            shape.strokeBorder(lineWidth: 3)
            Text(content)
                .opacity(isFaceUp ? 1 : 0) // 仅隐藏文字，不移除元素
        }
        .onTapGesture {
            isFaceUp.toggle()
        }
    }
}

方法2：固定卡片尺寸 #

通过frame配合aspectRatio强制卡片保持固定尺寸，避免内容变化影响布局：

// 在ContentView中修改卡片调用代码
CardView(content: emoji)
    .aspectRatio(2/3, contentMode: .fit)
    .frame(minWidth: 65, maxWidth: .infinity) // 固定最小宽度，确保尺寸稳定

或在CardView内部直接设置固定尺寸：

struct CardView: View {
    var content: String
    @State var isFaceUp: Bool = true
    var body: some View {
        ZStack {
            let shape = RoundedRectangle(cornerRadius: 20)
            if isFaceUp {
                shape.fill().foregroundColor(.white)
                shape.strokeBorder(lineWidth: 3)
                Text(content)
            } else {
                shape.fill()
            }
        }
        .frame(minWidth: 65, minHeight: 65 * 3/2) // 按2:3比例固定最小高度
        .onTapGesture {
            isFaceUp.toggle()
        }
    }
}

方法3：优化LazyVGrid的GridItem配置 #

将GridItem的尺寸设置为固定或更稳定的模式，避免行高动态变化：

// 使用fixed代替adaptive，固定列宽
LazyVGrid(columns: [GridItem(.fixed(65))]) {
    // 卡片循环代码
}

如果需要自适应列数，可结合fixedSize：

LazyVGrid(columns: [GridItem(.adaptive(minimum: 65))]) {
    // 卡片循环代码
}.fixedSize(horizontal: false, vertical: true)

修改后的完整代码示例（采用方法1） #

import SwiftUI

struct ContentView: View {
    var emojis = ["a", "b", "c", "d", "e", "f"]
    var emojiCount = 6
    var body: some View {
        VStack {
            ScrollView {
                LazyVGrid(columns: [GridItem(.adaptive(minimum: 65))]) {
                    ForEach(emojis[0..<emojiCount], id: \.self) { emoji in
                        CardView(content: emoji).aspectRatio(2/3, contentMode: .fit)
                    }
                }.foregroundColor(.red)
            }
        }
        .padding(.horizontal)
    }
}

struct CardView: View {
    var content: String
    @State var isFaceUp: Bool = true
    var body: some View {
        ZStack {
            let shape = RoundedRectangle(cornerRadius: 20)
            shape.fill().foregroundColor(isFaceUp ? .white : .red)
            shape.strokeBorder(lineWidth: 3)
            Text(content)
                .opacity(isFaceUp ? 1 : 0)
        }
        .onTapGesture {
            isFaceUp.toggle()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .preferredColorScheme(.light)
        ContentView()
            .preferredColorScheme(.dark)
    }
}

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