SwiftUI双视图3D翻转动画问题：点击后图片未显示求助

你的问题核心是状态判断和实际修改的状态不匹配：代码里用card.isFaceUp控制图片是否显示，但点击手势里只切换了本地的isFaceUp变量，根本没改变card.isFaceUp的值，所以图片永远不会显示。另外动画的累加方式也容易导致状态混乱，下面是两种修复方案：

方案1：用本地状态控制显示 #

直接把判断条件换成本地的isFaceUp，同时优化动画逻辑（避免多次点击后角度累加异常）：

struct DogCard: View {
    @State private var isFaceUp = false
    // 用计算属性获取动画角度，和状态绑定
    private var animationAngle: Double {
        isFaceUp ? 180 : 0
    }
    
    var card: MemoryGame.Card
    var body: some View {
        ZStack{
            let shape = RoundedRectangle(cornerRadius: 10)
            if isFaceUp {
                shape.stroke(lineWidth: 3).foregroundColor(.blue)
                Image(card.content).resizable().scaledToFit().padding()
            } else {
                shape.fill().foregroundColor(.blue)
            }
        }
        .rotation3DEffect(.degrees(animationAngle), axis: (x: 0, y: 1, z: 0))
        .onTapGesture {
            withAnimation {
                isFaceUp.toggle()
            }
        }
    }
}

方案2：绑定外部Card的状态（推荐，符合MemoryGame逻辑） #

如果card是来自外部数据源的模型，应该用@Binding让本地视图和数据源同步状态，这样翻转状态会被持久化到模型中：

struct DogCard: View {
    @Binding var card: MemoryGame.Card
    private var animationAngle: Double {
        card.isFaceUp ? 180 : 0
    }
    
    var body: some View {
        ZStack{
            let shape = RoundedRectangle(cornerRadius: 10)
            if card.isFaceUp {
                shape.stroke(lineWidth: 3).foregroundColor(.blue)
                Image(card.content).resizable().scaledToFit().padding()
            } else {
                shape.fill().foregroundColor(.blue)
            }
        }
        .rotation3DEffect(.degrees(animationAngle), axis: (x: 0, y: 1, z: 0))
        .onTapGesture {
            withAnimation {
                card.isFaceUp.toggle()
            }
        }
    }
}

关键修复点说明 #

• 移除了冗余的animationAmount状态，改用状态对应的计算属性控制角度，避免状态不同步
• 确保显示逻辑的判断条件和点击时修改的状态一致（要么用本地isFaceUp，要么用绑定的card.isFaceUp）
• 动画逻辑和状态绑定，每次翻转都是从0°到180°的正确过渡

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