SwiftUI：替换.animation(.default)为新API并修复FAQ视图动画失效

问题根源 #

你之前的代码把.animation(.default, value: collapsed)直接加在VStack外层，而内容的显示/隐藏是条件渲染（if !collapsed），这种情况下动画修饰符无法正确捕获条件视图的过渡变化，导致动画失效。下面提供两种可靠的解决方案：

方案一：使用withAnimation统一控制动画（推荐） #

直接在状态切换时用withAnimation包裹，所有关联的视图变化都会自动应用动画，无需额外添加.animation修饰符，代码更简洁可控。

修改后的FAQListView代码：

struct FAQListView: View {
    let header: Text
    let content: Text
    @State private var collapsed = true
    
    var body: some View {
        VStack {
            HStack {
                header
                    .font(.headline)
                Spacer()
                Image(systemName: "chevron.forward")
                    .rotationEffect(.degrees(collapsed ? 0 : 90))
                    .foregroundColor(.blue)
            }
            .padding(.bottom, 10)
            
            if !collapsed {
                HStack {
                    content
                    Spacer()
                }
                // 给内容添加过渡效果，让展开/收起更自然
                .transition(.opacity.combined(with: .move(edge: .top)))
            }
            
        }
        .onTapGesture {
            // 用withAnimation包裹状态切换，自动触发所有关联视图的动画
            withAnimation(.default) {
                collapsed.toggle()
            }
        }
        .padding(20)
    }
}

说明：

• withAnimation会将闭包内的状态变更所触发的所有视图更新（包括箭头旋转、内容显示/隐藏、VStack高度变化）都应用动画；
• 添加.transition可以让内容的出现/消失更平滑，你也可以根据需求换成其他过渡效果（比如.scale）。

方案二：正确使用带value参数的新动画API #

如果坚持用.animation(_:value:)，需要确保动画修饰符覆盖到条件渲染的内容和布局变化的容器，避免位置错误导致动画失效。

修改后的FAQListView代码：

struct FAQListView: View {
    let header: Text
    let content: Text
    @State private var collapsed = true
    
    var body: some View {
        VStack {
            HStack {
                header
                    .font(.headline)
                Spacer()
                Image(systemName: "chevron.forward")
                    .rotationEffect(.degrees(collapsed ? 0 : 90))
                    .foregroundColor(.blue)
                    // 给箭头单独指定动画（可选，也可以依赖外层动画）
                    .animation(.linear, value: collapsed)
            }
            .padding(.bottom, 10)
            
            if !collapsed {
                HStack {
                    content
                    Spacer()
                }
                .transition(.opacity.combined(with: .move(edge: .top)))
                // 给条件内容添加动画，捕获显示/隐藏变化
                .animation(.default, value: collapsed)
            }
            
        }
        .onTapGesture {
            collapsed.toggle()
        }
        // 给整个VStack添加动画，捕获布局高度变化
        .animation(.default, value: collapsed)
        .padding(20)
    }
}

说明：

• 外层VStack的动画负责处理整体布局的高度变化；
• 条件内容的动画负责处理内容的显示/隐藏过渡；
• 箭头的动画可以单独指定，也可以依赖外层动画，根据需求调整即可。

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