SwiftUI视图转场动画修改咨询：解决if语句切换视图残留问题

你的代码问题在于：Text("First View")始终处于VStack的固定位置，无论是否切换到SecondView，它都会保留在界面上，导致原视图内容残留。要彻底清除原视图并实现自定义转场，核心是让整个视图单元（包含背景、文本、交互控件）作为切换对象，而非仅切换局部内容。以下是几种实用方案：

方案1：条件切换完整视图 + 系统转场动画 #

将首页的所有内容（背景、文本、按钮）封装成独立视图，通过@State变量控制整个视图的替换，配合SwiftUI内置的transition实现多种动画效果。

import SwiftUI

struct ContentView: View {
    @State private var showSecondView = false
    
    var body: some View {
        ZStack {
            // 首页完整视图
            if !showSecondView {
                FirstFullView(showSecondView: $showSecondView)
                    .transition(.slide) // 可替换为.scale/.opacity/.move(edge: .leading)等
            } 
            // 第二页完整视图
            else {
                SecondFullView(showFirstView: $showSecondView)
                    .transition(.scale)
            }
        }
        .animation(.easeInOut(duration: 0.5), value: showSecondView)
    }
}

// 首页完整内容封装
struct FirstFullView: View {
    @Binding var showSecondView: Bool
    
    var body: some View {
        ZStack {
            Color.red.ignoresSafeArea()
            VStack {
                Text("First View")
                    .font(.largeTitle)
                    .foregroundColor(.white)
                Button("Go to Second View") {
                    showSecondView = true
                }
                .padding()
                .background(.white)
                .foregroundColor(.red)
                .cornerRadius(8)
            }
        }
    }
}

// 第二页完整内容封装（添加返回按钮）
struct SecondFullView: View {
    @Binding var showFirstView: Bool
    
    var body: some View {
        ZStack {
            Color.blue.ignoresSafeArea()
            VStack {
                Text("Second View")
                    .font(.largeTitle)
                    .foregroundColor(.white)
                Button("Back to First View") {
                    showFirstView = false
                }
                .padding()
                .background(.white)
                .foregroundColor(.blue)
                .cornerRadius(8)
            }
        }
    }
}

#Preview {
    ContentView()
}

方案2：自定义转场动画（手动控制偏移/透明度） #

如果需要更个性化的动画效果，可以通过offset和opacity属性手动控制视图的入场/退场轨迹，适合打造独特的切换效果。

import SwiftUI

struct ContentView: View {
    @State private var showSecondView = false
    let screenWidth = UIScreen.main.bounds.width
    
    var body: some View {
        ZStack {
            FirstFullView(showSecondView: $showSecondView)
                .offset(x: showSecondView ? -screenWidth : 0)
                .opacity(showSecondView ? 0 : 1)
            
            SecondFullView(showFirstView: $showSecondView)
                .offset(x: showSecondView ? 0 : screenWidth)
                .opacity(showSecondView ? 1 : 0)
        }
        .animation(.easeInOut(duration: 0.6), value: showSecondView)
    }
}

// FirstFullView和SecondFullView同方案1

方案3：NavigationStack导航式转场（iOS 16+） #

如果你的场景是导航层级切换，使用NavigationStack可以借助系统自带的push/pop动画，同时自动管理视图生命周期，避免内容残留。

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            FirstFullView()
        }
    }
}

struct FirstFullView: View {
    var body: some View {
        ZStack {
            Color.red.ignoresSafeArea()
            VStack {
                Text("First View")
                    .font(.largeTitle)
                    .foregroundColor(.white)
                NavigationLink("Go to Second View") {
                    SecondFullView()
                }
                .padding()
                .background(.white)
                .foregroundColor(.red)
                .cornerRadius(8)
            }
        }
    }
}

struct SecondFullView: View {
    var body: some View {
        ZStack {
            Color.blue.ignoresSafeArea()
            Text("Second View")
                .font(.largeTitle)
                .foregroundColor(.white)
        }
    }
}

#Preview {
    ContentView()
}

关键说明 #

• 避免在同一容器内混合固定内容和切换内容，确保切换时是完整视图的替换，而非局部控件的切换。
• 系统内置的transition支持多种预设动画，也可以通过AnyTransition组合自定义动画（如.slide.combined(with: .opacity)）。
• 所有方案都可以通过修改animation的参数（如duration、ease类型）调整动画的速度和曲线。

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