SwiftUI中Login Screen如何实现账号密码校验正确后跳转其他视图

你可以通过状态驱动的方式实现跳转，SwiftUI所有页面跳转逻辑都依赖状态变量触发，不需要手动编写push/pop代码，以下是两种最常用的实现方式：

方式1：导航栈压栈跳转（适合登录页作为导航栈根页，跳转后可返回登录页的场景） #

iOS16及以上系统推荐用NavigationStack实现，核心步骤：

• 新增布尔类型状态变量，标记登录校验是否通过
• 把现有登录页内容嵌套在NavigationStack内部
• 在登录按钮的点击回调里做账号密码校验，校验通过后修改状态变量值
• 用navigationDestination修饰符绑定状态，状态变更时自动跳转到目标视图

修改后的完整代码：

struct LoginBoard: View {
    @State private var login = "Tony"
    @State private var password = "1234"
    // 控制导航跳转的状态标记
    @State private var navigateToHome = false

    var body: some View {
        // 最外层嵌套导航栈
        NavigationStack {
            ZStack {
                VStack(spacing: 20) {
                    Text("Enter Login and Password")

                    HStack {
                        Image(systemName: "person")
                        TextField("Login", text: $login)
                            .textInputAutocapitalization(.never)
                    }
                    .padding(.horizontal)

                    SecureField("Password", text: $password)
                        .padding(.horizontal)

                    Button("Login") {
                        // 执行账号密码校验逻辑
                        if login == "Tony" && password == "1234" {
                            // 校验通过修改状态，自动触发跳转
                            navigateToHome = true
                        }
                    }
                    .buttonStyle(.borderedProminent)
                }
            }
            // 绑定跳转状态，状态为true时加载目标视图
            .navigationDestination(isPresented: $navigateToHome) {
                HomeView() // 替换为你自己的目标页面即可
                    .navigationBarBackButtonHidden(false) // 不需要返回键可设为true
            }
        }
    }
}

// 示例目标主页视图
struct HomeView: View {
    var body: some View {
        Text("登录成功，这是主页")
    }
}

方式2：根视图替换（生产环境APP最常用，登录后不保留登录页，返回操作不会回到登录界面） #

如果不想让用户登录后通过返回键回到登录页，不要用压栈跳转，而是在APP根层级控制当前显示的视图，核心步骤：

• 在APP根视图（一般是App结构体或根ContentView）定义状态标记当前登录状态
• 根据登录状态判断是显示登录页还是主页
• 登录页校验通过后修改全局登录状态，根视图会自动切换到主页，销毁登录页实例

示例代码：

@main
struct YourApp: App {
    // 全局登录状态，可配合@AppStorage持久化存储实现自动登录逻辑
    @State private var isLoggedIn = false

    var body: some Scene {
        WindowGroup {
            // 根据登录状态切换根视图，切换时自动销毁旧视图
            if isLoggedIn {
                HomeView()
            } else {
                LoginBoard(isLoggedIn: $isLoggedIn)
            }
        }
    }
}

struct LoginBoard: View {
    @State private var login = "Tony"
    @State private var password = "1234"
    // 绑定父视图传入的全局登录状态
    @Binding var isLoggedIn: Bool

    var body: some View {
        ZStack {
            VStack(spacing: 20) {
                Text("Enter Login and Password")

                HStack {
                    Image(systemName: "person")
                    TextField("Login", text: $login)
                        .textInputAutocapitalization(.never)
                }
                .padding(.horizontal)

                SecureField("Password", text: $password)
                    .padding(.horizontal)

                Button("Login") {
                    if login == "Tony" && password == "1234" {
                        // 校验通过修改全局状态，根视图自动切换为主页
                        isLoggedIn = true
                    }
                }
                .buttonStyle(.borderedProminent)
            }
        }
    }
}

补充说明：如果需要全屏模态弹出目标页，可以把navigationDestination替换为.fullScreenCover(isPresented: $navigateToHome) { 目标视图() }即可，弹出后可以自定义关闭逻辑。

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