SwiftUI视图仅能淡入无法淡出，求实现完整淡入淡出方案

问题场景 #

现有SwiftUI代码中，RoundedRectangle仅能实现淡入效果，切换状态后无法触发淡出动画，且需要确保淡出完成后视图完全从层级中移除。

原始代码 #

struct ContentView: View {
    
    @State var show = false
    
    var body: some View {
        
        VStack {
            
            ZStack {
                
                Color.black
                
                if show {
                    RoundedRectangle(cornerRadius: 20)
                        .fill(.brown)
                        .transition(.opacity)
                }
                
            }
            
            Button {
                withAnimation(.easeInOut(duration: 1)) {
                    show.toggle()
                }
            } label: {
                Text("TRIGGER")
            }

        }

    }
    
}

问题原因 #

ZStack在条件视图被移除时会立即回收其布局空间，导致淡出动画被直接打断，无法完整执行。

解决方案 #

给条件视图添加固定尺寸约束，确保动画过程中布局空间被保留，直到淡出动画完成后再从层级中移除。

修改后代码（方案一：固定尺寸） #

struct ContentView: View {
    
    @State var show = false
    
    var body: some View {
        
        VStack {
            
            ZStack {
                
                Color.black
                
                if show {
                    RoundedRectangle(cornerRadius: 20)
                        .fill(.brown)
                        .transition(.opacity)
                        .fixedSize() // 锁定视图尺寸，避免布局空间被立即回收
                }
                
            }
            
            Button {
                withAnimation(.easeInOut(duration: 1)) {
                    show.toggle()
                }
            } label: {
                Text("TRIGGER")
            }

        }

    }
    
}

修改后代码（方案二：自适应父容器） #

如果需要视图占满父容器空间，可使用明确的frame约束：

RoundedRectangle(cornerRadius: 20)
    .fill(.brown)
    .transition(.opacity)
    .frame(maxWidth: .infinity, maxHeight: .infinity) // 强制占满父容器空间

原理说明 #

SwiftUI的过渡动画依赖视图在布局中的空间存在。通过添加fixedSize或明确frame，可以保证动画执行期间视图的布局位置和空间不被回收，让淡出动画完整执行后，再将视图从层级中移除。

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