SwiftUI实现按钮点击生成多视图并自动消失的技术问题

完全可行，你可以通过管理一组动画项的方式实现多次点击生成独立视图的效果。核心思路是用数组存储每个需要显示的动画元素，每个元素拥有自己的动画生命周期，渲染时通过ForEach遍历数组生成独立视图。

具体实现代码 #

1. 定义动画项模型

用唯一标识区分每个动画视图：

struct AnimationItem: Identifiable {
    let id = UUID()
}

2. 独立的动画视图

让视图自行处理内部动画逻辑，无需外部绑定状态：

struct AnimationView: View {
    let onFinish: () -> Void
    @State private var isAnimating = false
    
    var body: some View {
        Text("-1")
            .bold()
            .opacity(isAnimating ? 0 : 1)
            .offset(y: isAnimating ? -50 : 0)
            .onAppear {
                // 启动动画
                withAnimation(.linear(duration: 1)) {
                    isAnimating = true
                }
                // 动画结束后通知父视图移除自己
                DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                    onFinish()
                }
            }
    }
}

3. 主视图管理动画项

通过数组控制所有动画视图的添加与移除：

struct MainView: View {
    @State private var animationItems: [AnimationItem] = []
    
    var body: some View {
        VStack(spacing: 20) {
            // 用ZStack承载所有叠加的动画视图
            ZStack {
                ForEach(animationItems) { item in
                    AnimationView {
                        animationItems.removeAll { $0.id == item.id }
                    }
                }
            }
            .frame(height: 60) // 预留动画移动空间
            
            Button(action: {
                // 每次点击添加新的动画项
                animationItems.append(AnimationItem())
            }) {
                Text("点击减1")
                    .padding(.horizontal, 20)
                    .padding(.vertical, 10)
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(8)
            }
        }
        .padding()
    }
}

方案说明 #

• 每次点击按钮，就向animationItems数组添加新的AnimationItem，ForEach会自动渲染对应的AnimationView。
• 每个AnimationView在出现时自动启动向上淡出的动画，动画结束后通过闭包通知主视图移除自身，避免数组无限膨胀。
• 所有动画视图通过ZStack叠加显示，各自的动画独立执行，互不干扰。

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