When I click on the card, the space between the top and bottom of the card increases

orignial card

click once

click twice

struct CardView: View {
    // String -> MemoryGame<String>.Card
    let card: MemoryGame<String>.Card
    
    var body: some View {
        ZStack {
            let shape = RoundedRectangle(cornerRadius: 20.0)
            if card.isFaceUp {
                shape.fill(.white)
                shape.strokeBorder(lineWidth: 3)
                Text(card.content) // I think the root of the problem may be here
                    .font(.largeTitle)
            } else if card.isMatched {
                shape.opacity(0.0)
            } else {
                shape.fill()
            }
        }
    }
}

struct ContentView: View {
    @ObservedObject var viewModel: EmojiMemoryGame
    
    var body: some View {
        VStack {
            Text("Memorize!")
                .font(.largeTitle)
            Group {
                Text(viewModel.themeName)
                    .font(.subheadline)
                ScrollView {
                    LazyVGrid(columns: [GridItem(.adaptive(minimum: 75))]) {
                        ForEach(viewModel.cards) { card in
                            CardView(card: card)
                                .aspectRatio(2/3, contentMode: .fit)
                                .onTapGesture {
                                    viewModel.choose(card)
                                }
                        }
                    }
                    
                }
            }
            .foregroundColor(viewModel.theme.uiColor)
            .padding(.horizontal)
            
//            Spacer()
            
            Button {
                viewModel.startNewGame()
            } label: {
                Text("New Game")
                    .font(.title)
            }
            
            Text("Score: \(viewModel.score)")
        }
    }
}

I tried to analyze every detail of the code, and I found that the problem was probably in the CardView when the card was facing up, it was showing an extra Text that was causing an exception

CodePudding user response：

The Text element has its own frame and when added on top of the shape in this ZStack causes the frame of the whole stack to expand a little bit which is why you're seeing this problem. One quick and easy solution to this would be to remove the frame of the Text element with this modifier:

.frame(height: .zero)

which would look like this:

struct CardView: View {
// String -> MemoryGame<String>.Card
let card: MemoryGame<String>.Card

var body: some View {
    ZStack {
        let shape = RoundedRectangle(cornerRadius: 20.0)
        if card.isFaceUp {
            shape.fill(.white)
            shape.strokeBorder(lineWidth: 3)
            Text(card.content) // I think the root of the problem may be here
                .font(.largeTitle)
                .frame(height: .zero)
        } else if card.isMatched {
            shape.opacity(0.0)
        } else {
            shape.fill()
        }
    }
}