SwiftUI中如何为底部提示视图添加上下滑入/滑出动画？

你的问题出在状态修改没有配合动画上下文，且直接操作View实例的方式不符合SwiftUI的状态管理逻辑，导致过渡动画无法触发。以下是具体的修复方案：

核心问题分析 #

你当前通过直接赋值bottomAlertView（可选View实例）来控制显示/隐藏，但SwiftUI的动画系统需要通过可观察的状态变化+withAnimation包裹来触发过渡效果。直接修改可选View的赋值，SwiftUI无法正确识别这个变化并应用动画。

修复方案（推荐方式） #

改用Bool状态控制显示，配合withAnimation包裹状态修改，同时用单独的变量存储提示类型：

1. 添加状态变量 #

在View结构体中添加两个@State变量：

@State private var showBottomAlert = false
@State private var currentAlertType: BottomAlertType?

2. 修改body中的提示视图渲染逻辑 #

用showBottomAlert这个Bool值来控制显示，不再依赖可选View实例：

var body: some View {
    ZStack {
        // 原有内容（toolbar、状态切换视图等）保持不变
        VStack {
            toolbar
            Spacer()
            switch viewModel.status {
            case .loading:
                LoadingView(isAnimating: $isLoading)
            case .loaded(_):
                productView
            case .error(_):
                Text("Please Retry.")
                    .onAppear {
                        buildBottomAlert(type: .error)
                    }
            }
        }
        
        VStack {
            Spacer()
            if showBottomAlert, let alertType = currentAlertType {
                BottomAlert(type: alertType)
                    .transition(.move(edge: .bottom))
            }
        }
    }
}

3. 修改提示视图的显示/隐藏方法 #

用withAnimation包裹状态修改，确保动画触发：

func buildBottomAlert(type: BottomAlertType) {
    withAnimation {
        currentAlertType = type
        showBottomAlert = true
    }
    DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
        removeBottomAlert()
    }
}

func removeBottomAlert() {
    withAnimation {
        showBottomAlert = false
    }
    // 延迟清除类型，避免动画过程中视图异常
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
        currentAlertType = nil
    }
}

替代方案（保留可选View实例） #

如果你坚持要通过可选View实例来控制，只需在修改bottomAlertView时用withAnimation包裹即可：

// 修改build和remove方法
func buildBottomAlert(type: BottomAlertType) {
    withAnimation {
        self.bottomAlertView = BottomAlert(type: type)
    }
    DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
        self.removeBottomAlert()
    }
}

func removeBottomAlert() {
    withAnimation {
        self.bottomAlertView = nil
    }
}

这种方式也能触发动画，但推荐用第一种方案，更符合SwiftUI的状态驱动设计理念。

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