Rows in LazyVGrid shift up when content changes - swiftui

Question

I'm learning SwiftUI and have been prototyping a card matching game. At the moment, I am just setting up the grids and the face up/down toggling. In this example, I have the preview set to run on an iPhone 14 and it'll have two rows with the top row being cards a-e and the bottom row with just f. When I click on card "a", it flips correctly but the whole second row shifts up. My guess is that the content of that card is being removed, causing it to compress a little bit but I can't figure out why that would happen. Is there a way to "fix" either the card content or the LazyVGrid rows so that the rows don't shift up or down?
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)
if isFaceUp{
shape.fill().foregroundColor(.white)
shape.strokeBorder(lineWidth: 3)
Text(content)
} else {
shape.fill()
}
}
.onTapGesture {
isFaceUp = !isFaceUp
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
.preferredColorScheme(.light)
ContentView()
.preferredColorScheme(.dark)
}
}

Answer 1

Here is a way to fix the card content. Include the Text(content) in the face down View, but add .opacity(0) to make it invisible:
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()
Text(content).opacity(0) // here
}
}
.onTapGesture {
isFaceUp = !isFaceUp
}
}
}
Alternate Solution:
Make the Text(content) an .overlay of the card. That way it won't change the size of the CardView:
if isFaceUp{
shape.fill().foregroundColor(.white)
shape.strokeBorder(lineWidth: 3)
.overlay {
Text(content)
}
} else {
shape.fill()
}