SwiftUI子视图过渡动画问题：显隐自定义动画失效求助

问题场景 #

我做了嵌套视图结构：TestBadgeView、内嵌它的TestBadgeInsideHStackView，还有父视图TestTransitionView。父视图里的文本框能更新徽章文本：

• 中间的徽章点按钮能显隐，.transition(.scale)动画正常运行；
• 右上角的徽章只有输入"hello world"才显示，显隐逻辑没问题，但过渡动画完全不生效。

最终要实现的是：父视图往下传数据，子视图根据数据逻辑控制自己显隐，还要带自定义过渡动画。

为啥动画失效 #

SwiftUI的过渡动画必须有动画上下文才能触发：

• 中间徽章的显隐是在withAnimation闭包里切换showView状态，有明确的动画上下文，所以过渡能正常运行；
• 右上角徽章的显隐是靠text == "hello world"这个条件触发的，text变化导致条件结果切换时，这个状态变化没被包裹在动画上下文里，SwiftUI只会直接重建视图，不会执行过渡动画。

解决办法 #

办法1：父视图里给状态切换加动画上下文 #

在父视图的TextField上加onChange，当text变化导致显隐状态切换时，用withAnimation触发：

TextField("textfield", text: $text)
    .padding()
    .border(.gray)
    .padding()
    .onChange(of: text) { newValue, oldValue in
        // 检测显隐状态是否发生切换
        let oldShow = oldValue == "hello world"
        let newShow = newValue == "hello world"
        if oldShow != newShow {
            withAnimation {
                // 不需要改状态，只要触发动画上下文就行
            }
        }
    }

办法2：子视图绑定动画到显隐状态 #

修改TestBadgeInsideHStackView，给包着条件渲染的HStack加.animation修饰符，绑定到shouldShowBadge：

struct TestBadgeInsideHStackView<Content: View> : View {
    let content: Content
    private var shouldShowBadge: Bool
    
    init(shouldShowBadge: Bool, @ViewBuilder content: () -> Content) {
        self.content = content()
        self.shouldShowBadge = shouldShowBadge
    }
    
    var body: some View {
        HStack {
            Text("badge ---> ")
            Spacer()
            if shouldShowBadge {
                TestBadgeView {
                    content
                }
                .transition(.scale)
            }
        }
        .frame(height: 100)
        .padding()
        .animation(.default, value: shouldShowBadge) // 新增这行，绑定动画到状态
    }
}

办法3：优化子视图的状态绑定（推荐） #

把TestBadgeInsideHStackView的shouldShowBadge改成@Binding，让父视图的状态直接驱动子视图，同时确保父视图的状态切换在动画上下文里：

// 修改子视图定义
struct TestBadgeInsideHStackView<Content: View> : View {
    let content: Content
    @Binding var shouldShowBadge: Bool // 改成Binding类型
    
    init(shouldShowBadge: Binding<Bool>, @ViewBuilder content: () -> Content) {
        self.content = content()
        self._shouldShowBadge = shouldShowBadge
    }
    
    var body: some View {
        HStack {
            Text("badge ---> ")
            Spacer()
            if shouldShowBadge {
                TestBadgeView {
                    content
                }
                .transition(.scale)
            }
        }
        .frame(height: 100)
        .padding()
    }
}

// 父视图里的用法
struct TestTransitionView: View {
    @State var showView: Bool = true
    @State var text: String = "hello"
    @State private var shouldShowRightBadge = false // 新增独立状态
    
    var body: some View {
        VStack {
            TextField("textfield", text: $text)
                .padding()
                .border(.gray)
                .padding()
                .onChange(of: text) { newValue in
                    // 用withAnimation包裹状态切换
                    withAnimation {
                        shouldShowRightBadge = newValue == "hello world"
                    }
                }
            
            TestBadgeInsideHStackView(shouldShowBadge: $shouldShowRightBadge) {
                Text(text.uppercased())
            }
            
            // ... 其他代码不变
        }
    }
}

完整测试代码（办法2实现） #

import SwiftUI

struct TestTransitionView: View {
    
    @State var showView: Bool = true
    @State var text: String = "hello"
    
    var body: some View {
        
            VStack {
                               
                TextField("textfield", text: $text)
                    .padding()
                    .border(.gray)
                    .padding()
                
                TestBadgeInsideHStackView(shouldShowBadge: text == "hello world") {
                    Text(text.uppercased())
                }
                
                HStack {
    
                    if showView {
                        Text(text.uppercased())
                            .padding(.horizontal, 10)
                            .padding(.vertical, 7)
                            .background(Rectangle()
                                .fill(.gray).opacity(0.1)
                                .cornerRadius(6)
                            )
                            .font(.caption)
                            .fontWeight(.bold)
                            .transition(.scale)
                    }
                }
                .frame(height: 100)
                .padding()
                
                Spacer()
                Button("Show/Hide Me") {
                    withAnimation {
                        showView.toggle()
                    }
                }.padding(50)
            }
    }
}


struct TestBadgeInsideHStackView<Content: View> : View {
    let content: Content
    private var shouldShowBadge: Bool
    
    init(shouldShowBadge: Bool, @ViewBuilder content: () -> Content) {
        self.content = content()
        self.shouldShowBadge = shouldShowBadge
    }
    
    var body: some View {
        HStack {
            Text("badge ---> ")
            Spacer()
            if shouldShowBadge {
                TestBadgeView {
                    content
                }
                .transition(.scale)
            }
        }
        .frame(height: 100)
        .padding()
        .animation(.default, value: shouldShowBadge) // 新增动画绑定
    }
}


struct TestBadgeView<Content: View>: View {
    let content: Content
    
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }
        
    var body: some View {
        content
            .padding(.horizontal, 10)
            .padding(.vertical, 7)
            .background(Rectangle()
                .fill(.gray).opacity(0.1)
                .cornerRadius(6)
            )
            .font(.caption)
            .fontWeight(.bold)
            .transition(.scale)
    }
}

#Preview {
    TestTransitionView()
}

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