SwiftUI登录后如何跳转至独立文件的新视图并保留登出按钮

第一步：创建独立的首页视图文件 #

首先在项目中新建一个名为HomeView.swift的SwiftUI文件，你可以在这个文件中编写所有首页的业务逻辑和UI布局，基础示例代码如下：

import SwiftUI

struct HomeView: View {
    // 可在此处定义首页需要的属性、状态、专属ViewModel等
    var body: some View {
        // 替换为你实际需要的首页布局，比如TabView、列表、信息流等
        VStack {
            Text("欢迎来到首页")
                .font(.largeTitle)
                .padding()
            // 其他首页内容...
        }
    }
}

struct HomeView_Previews: PreviewProvider {
    static var previews: some View {
        HomeView()
    }
}

第二步：修改原有ContentView的跳转逻辑 #

把原来显示Text("Signed In")的位置替换为刚编写的HomeView()即可，登出按钮可以根据你的需求选择两种放置方式：

• 方式1：保留在父视图，所有首页场景下都能看到登出按钮，修改后的ContentView代码如下：

struct ContentView: View {

    @EnvironmentObject var viewModel: AppViewModel
    
    var body: some View {
        NavigationView{
            if viewModel.signedIn{
                VStack{
                    // 替换为独立的首页视图
                    HomeView()
                    // 登出按钮保留在父层
                    Button(action: {
                        viewModel.signOut()
                    }, label: {
                        Text("Sign Out")
                            .foregroundColor(.blue)
                            .background(Color(.green))
                    })
                    .padding()
                }
            }
            else{
                SignInView()
            }
        }
        .onAppear {
            viewModel.signedIn = viewModel.isSignedIn
        }
    }
}

• 方式2：把登出按钮移到HomeView内部，更灵活控制按钮的展示位置（比如放在导航栏、个人中心页），需要给HomeView也注入AppViewModel，代码示例：
  首先修改HomeView，添加EnvironmentObject属性：

struct HomeView: View {
    @EnvironmentObject var viewModel: AppViewModel
    var body: some View {
        NavigationStack { // 适配iOS16及以上，低版本可替换为NavigationView
            VStack {
                Text("欢迎来到首页")
            }
            .toolbar {
                // 把登出按钮放在导航栏右上角
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("登出") {
                        viewModel.signOut()
                    }
                }
            }
        }
    }
}

此时ContentView的代码可以简化，不需要再单独放置登出按钮：

struct ContentView: View {

    @EnvironmentObject var viewModel: AppViewModel
    
    var body: some View {
        NavigationView{
            if viewModel.signedIn{
                // 直接显示首页视图即可，登出逻辑已经在首页内部实现
                HomeView()
                    .environmentObject(viewModel) // 确保ViewModel注入到首页视图树
            }
            else{
                SignInView()
            }
        }
        .onAppear {
            viewModel.signedIn = viewModel.isSignedIn
        }
    }
}

注意事项 #

• 要确保你的AppViewModel已经在App入口处通过.environmentObject()注入到整个视图树，否则HomeView里取不到ViewModel会触发崩溃
• 如果你的首页需要嵌套导航、Tab栏等复杂布局，直接在HomeView的body里写对应逻辑即可，不需要改动ContentView的登录判断逻辑

内容的提问来源于stack exchange，提问作者Some User 444