SwiftUI弹窗动画异常及底层视图闪烁问题求助

存在的问题 #

• 首次调用弹窗时无底部滑入动画，直接出现
• 弹窗的背景蒙层与内容视图过渡效果未按预期分别生效
• 弹窗显示/隐藏时底层列表数据出现闪烁
• 弹窗未从屏幕底部完全滑入，且关闭时未滑至边缘就消失

修复后的代码 #

struct SOAnimation: View {
    @State var selectedImage = "camera.filters"
    @State var showPopup = false
    // 提前生成稳定的列表数据，避免每次刷新生成新UUID导致闪烁
    private let listData = (1..<25).map { _ in UUID().uuidString }
    
    var body: some View {
        ZStack(alignment: .top) {
            VStack {
                Text("Image").font(.largeTitle).fontWeight(.bold)
                ZStack {
                    Image(systemName: "circle.fill")
                        .resizable()
                        .frame(width: 81, height: 81)
                        .foregroundColor(Color.blue.opacity(0.2))
                    Image(systemName: selectedImage)
                        .resizable()
                        .frame(width: 44, height: 44)
                }
                .onTapGesture {
                    withAnimation(.spring(response: 0.4, dampingFraction: 0.8)) {
                        showPopup = true
                    }
                }
                
                VStack(alignment: .leading) {
                    ForEach(listData, id: \.self) { id in
                        Text(id)
                            .fontWeight(.semibold)
                    }
                }
                Spacer()
            }
            
            // 父容器控制弹窗显隐，确保过渡动画正确触发
            if showPopup {
                Popup(selectedImage: $selectedImage, showPopup: $showPopup)
                    .transition(.identity) // 让弹窗内部处理各自过渡
            }
        }
    }
}

struct Popup: View {
    @Binding var selectedImage: String
    @Binding var showPopup: Bool
    private let columns: [GridItem] = Array(repeating: .init(.flexible()), count: 4)
    private let images = ["camera.filters", "seal", "circle", "oval", "app", "diamond", "octagon", "play", "pause", "forward", "goforward", "wave.3.forward", "skew"]
    
    var body: some View {
        ZStack(alignment: .bottom) { // 对齐到底部，确保弹窗从底部滑入
            // 蒙层与内容视图放在同一个ZStack，统一受showPopup控制
            Color.black.opacity(0.5)
                .onTapGesture {
                    withAnimation(.spring(response: 0.4, dampingFraction: 0.8)) {
                        showPopup = false
                    }
                }
                .ignoresSafeArea()
                .transition(.opacity)
            
            LazyVGrid(columns: columns, alignment: .center, spacing: 20) {
                ForEach(images, id: \.self) { image in
                    Image(systemName: image)
                        .resizable()
                        .frame(width: 30, height: 30)
                        .onTapGesture {
                            selectedImage = image
                            withAnimation(.spring(response: 0.4, dampingFraction: 0.8)) {
                                showPopup = false
                            }
                        }
                }
            }
            .padding()
            .background(Color.white)
            .cornerRadius(20)
            .padding(.horizontal)
            .transition(.move(edge: .bottom))
        }
        .animation(.spring(response: 0.4, dampingFraction: 0.8), value: showPopup)
    }
}

修复细节说明 #

1. 首次弹窗无动画问题
   原代码中Popup内部用两个独立的if showPopup判断，导致SwiftUI无法正确追踪视图的添加/移除状态，过渡动画失效。修复后将蒙层和弹窗内容放在同一个ZStack中，统一受showPopup控制，确保动画触发逻辑连贯。

2. 过渡效果异常问题
   给蒙层设置.transition(.opacity)，内容视图设置.transition(.move(edge: .bottom))，并通过animation(_:value:)将动画绑定到showPopup状态，确保两个过渡效果同步且按预期生效。

3. 底层视图数据闪烁问题
   原代码中ForEach(1..<25)每次视图刷新都会重新生成UUID().uuidString，导致列表内容频繁重绘闪烁。修复后提前生成稳定的listData数组，确保数据源不变，避免不必要的视图刷新。

4. 弹窗滑入/滑出位置异常问题
   将Popup的ZStack对齐方式设为.bottom，确保弹窗内容从屏幕底部开始滑入；同时调整动画参数（response和dampingFraction）让滑动节奏更贴合预期效果，移除冗余的空点击手势避免干扰交互。

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