SwiftUI中发牌动画被HStack遮挡无法显示在上方如何解决？

核心原因是zIndex仅在同一个直接父视图下的同级视图之间生效：你给deck内部卡牌设置的zIndex只能控制卡牌之间的叠放顺序，无法影响deck与HStack其他元素、HStack与上层gameBody的层级关系。按照下面两步修改即可解决遮挡问题：

1. 给底部HStack设置高于gameBody的全局层级
   因为HStack和gameBody都是根VStack的直接子视图，默认zIndex都为0，你只需要给HStack添加zIndex(1)修饰符，让HStack整体层级高于gameBody，那么HStack内部飞出的卡牌就会显示在gameBody上方不会被遮挡：

// 底部HStack部分修改后代码
HStack{
    Button("Show Hint"){
        game.hint()
    }.frame(maxWidth: .infinity)
    deckBody
    discardPileBody
    Button("New Game"){
        game.newGame()
    }.frame(maxWidth: .infinity)
}
.padding(6)
.zIndex(1) // 新增这一行

2. 允许卡牌超出父视图边界显示
   如果卡牌初始位置在HStack/Deck的frame范围外，会被父视图默认裁剪掉，你需要给deckBody添加clipped(false)修饰符：

// deckBody部分修改后代码
var deckBody: some View {
    ZStack {
        ForEach(game.deck()){ card in
            CardView(card: card)
                .matchedGeometryEffect(id: card.id, in: dealingNamespace)
                .transition(.asymmetric(insertion: .identity, removal: .identity))
                .zIndex(zIndex(of: card))
        }
    }
    .frame(width: CardConstants.undealtWidth, height: CardConstants.undealtHeight)
    .clipped(false) // 新增这一行，允许卡牌超出deck的frame范围显示
    .onTapGesture {
        withAnimation(.spring().speed(0.1)){
            game.showCards()
        }
    }
}

如果修改后还有裁剪问题，给底部的HStack也加上clipped(false)修饰符即可。

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