SwiftUI中条件显隐视图时ZStack显式动画失效问题

问题原因 #

你的代码中Banner显示无动画、隐藏正常，核心有两个原因：

• 原Banner视图包含Spacer()，添加时会导致ZStack布局发生大幅变更，SwiftUI优先处理布局更新，跳过了过渡动画。
• ViewModifier使用值传递的showBanner，状态从false变为true时，新创建的Banner视图未被纳入外部withAnimation的动画上下文。

解决方案 #

方案1：绑定状态+优化布局 #

修改ViewModifier使用@Binding同步外部状态，同时简化Banner布局避免大幅布局变动：

struct BannerViewModifier: ViewModifier {
    @Binding var showBanner: Bool

    func body(content: Content) -> some View {
        ZStack(alignment: .top) {
            content
            
            if showBanner {
                Text("banner")
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(Color.yellow)
                    .transition(.move(edge: .top).combined(with: .opacity))
            }
        }
    }
}

使用时传递绑定：

@State var showBanner = false
  
var body: some View {
    Button(showBanner ? "Hide banner" : "Show banner") {
        withAnimation { showBanner.toggle() }
    }
    .modifier(BannerViewModifier(showBanner: $showBanner))
}

方案2：改用Overlay布局 #

Overlay的布局上下文更稳定，能确保过渡动画正常触发，无需修改状态传递方式：

struct BannerViewModifier: ViewModifier {
    let showBanner: Bool

    func body(content: Content) -> some View {
        content
            .overlay(alignment: .top) {
                if showBanner {
                    Text("banner")
                        .frame(maxWidth: .infinity)
                        .padding()
                        .background(Color.yellow)
                        .transition(.move(edge: .top).combined(with: .opacity))
                }
            }
    }
}

使用方式和你原有代码一致，外部的withAnimation可同时触发显示/隐藏动画。

关于隐式动画的说明 #

你之前添加的.animation(.default)能生效，是因为它属于全局隐式动画，强制所有视图变更使用动画（包括新视图插入），但这会污染视图树的动画上下文，属于不良实践。iOS15后替代的.animation(.default, value: showBanner)无效，是因为Banner视图是条件创建的，状态变化时视图尚未存在，无法捕获动画触发信号。

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