SwiftUI中如何实现视图间的平滑导航？

一、优化切换动画生硬问题 #

1. 自定义TabView切换动画 #

SwiftUI默认TabView切换速度偏快，可通过自定义过渡动画柔化效果：

struct CustomTabView: View {
    @State private var selectedTab: Int = 0
    let tabs: [AnyView]
    
    var body: some View {
        ZStack {
            TabView(selection: $selectedTab) {
                ForEach(0..<tabs.count) { index in
                    tabs[index]
                        .tag(index)
                }
            }
            .tabViewStyle(.page(indexDisplayMode: .never))
            .animation(.easeInOut(duration: 0.3), value: selectedTab)
            
            // 自定义底部TabBar
            VStack {
                Spacer()
                HStack {
                    Button(action: { selectedTab = 0 }) {
                        Image(systemName: selectedTab == 0 ? "house.fill" : "house")
                    }
                    Spacer()
                    Button(action: { selectedTab = 1 }) {
                        Image(systemName: selectedTab == 1 ? "bell.fill" : "bell")
                    }
                    Spacer()
                    Button(action: { selectedTab = 2 }) {
                        Image(systemName: selectedTab == 2 ? "message.fill" : "message")
                    }
                    Spacer()
                    Button(action: { selectedTab = 3 }) {
                        Image(systemName: selectedTab == 3 ? "person.fill" : "person")
                    }
                }
                .padding()
                .background(Color.white)
                .cornerRadius(16)
                .padding(.horizontal)
            }
        }
    }
}

// 使用示例
CustomTabView(tabs: [
    AnyView(HomeNew()),
    AnyView(NotificationsTabView()),
    AnyView(MessageTabView()),
    AnyView(ProfileView())
])

通过page样式TabView配合自定义动画，可根据需求调整动画时长，让切换更自然。

2. 为单个视图添加过渡效果 #

给每个目标视图添加过渡动画，增强切换时的视觉连贯性：

struct HomeNew: View {
    var body: some View {
        Text("Home")
            .transition(.opacity.combined(with: .slide))
            .animation(.easeInOut(duration: 0.3), value: UUID())
    }
}

其他视图如ProfileView等可复用类似逻辑，过渡类型可选opacity、scale、slide等组合使用。

二、解决快速切换时的虚拟数据残留问题 #

1. 绑定视图生命周期管理数据 #

利用onAppear和onDisappear同步数据加载与清理，避免残留：

struct NotificationsTabView: View {
    @State private var notifications: [NotificationModel] = []
    
    var body: some View {
        List(notifications) { notification in
            Text(notification.title)
        }
        .onAppear {
            loadNotifications()
        }
        .onDisappear {
            notifications.removeAll()
        }
    }
    
    private func loadNotifications() {
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
            notifications = [
                NotificationModel(title: "新通知1"),
                NotificationModel(title: "新通知2")
            ]
        }
    }
}

视图消失时清空数据，再次出现时重新加载，杜绝旧数据内存残留。

2. 用ViewModel绑定视图生命周期 #

如果数据来自ViewModel，使用@StateObject确保其与视图同生命周期：

class MessageViewModel: ObservableObject {
    @Published var messages: [MessageModel] = []
    
    func loadMessages() {
        messages = [MessageModel(content: "消息1"), MessageModel(content: "消息2")]
    }
    
    func clearMessages() {
        messages.removeAll()
    }
}

struct MessageTabView: View {
    @StateObject private var viewModel = MessageViewModel()
    
    var body: some View {
        List(viewModel.messages) { message in
            Text(message.content)
        }
        .onAppear {
            viewModel.loadMessages()
        }
        .onDisappear {
            viewModel.clearMessages()
        }
    }
}

@StateObject保证ViewModel随视图销毁而释放，避免跨视图数据共享导致的残留。

3. 添加加载状态占位符 #

数据加载完成前显示占位符，避免旧数据短暂闪现：

struct ProfileView: View {
    @State private var user: UserModel?
    @State private var isLoading = true
    
    var body: some View {
        if isLoading {
            ProgressView("加载中...")
        } else if let user = user {
            VStack {
                Text(user.name)
                Text(user.email)
            }
        } else {
            Text("暂无数据")
        }
        .onAppear {
            loadUserProfile()
        }
        .onDisappear {
            user = nil
            isLoading = true
        }
    }
    
    private func loadUserProfile() {
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
            user = UserModel(name: "张三", email: "zhangsan@example.com")
            isLoading = false
        }
    }
}

通过加载状态控制显示内容，切换时优先展示占位符，屏蔽旧数据残留。

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