SwiftUI中登录提交时如何实现条件式跳转至新视图

嘿，我来帮你搞定SwiftUI登录后根据条件跳转不同视图的问题～ 下面分两种常见场景给你具体实现方案，分别适配iOS16+和iOS15及以下版本：

一、iOS16+ 推荐方案（NavigationStack + 枚举控制） #

这种方式是苹果现在主推的，代码更简洁清晰：

1. 定义目标视图枚举 #

首先在LoginUIView外面或者内部，定义一个遵循Identifiable的枚举，用来区分不同跳转目标：

enum DestinationViewType: Identifiable {
    case user
    case other
    
    var id: Self { self }
}

2. 添加状态变量控制跳转 #

在LoginUIView结构体里添加一个可选状态变量，用来绑定导航目标：

struct LoginUIView: View {
    @State private var name = ""
    @State private var pass = ""
    // 新增：控制跳转的状态变量
    @State private var destinationView: DestinationViewType?
    
    // ... 其他代码
}

3. 改造视图结构，添加导航容器和跳转规则 #

把原来的VStack包裹在NavigationStack里，并通过.navigationDestination绑定跳转逻辑：

var body: some View {
    NavigationStack {
        VStack {
            // 这里放你的用户名输入框、密码输入框等原有内容
            TextField("Username", text: $name)
                .padding()
                .border(.gray)
            SecureField("Password", text: $pass)
                .padding()
                .border(.gray)
            
            Button(action: { self.login(name: self.name, pass: self.pass) }) {
                Text("Login")
                    .padding()
                    .frame(maxWidth: .infinity)
                    .foregroundColor(Color.white)
                    .cornerRadius(4.0)
                    .background(Color("light-green"))
            }
        }
        .padding()
        // 添加导航跳转规则
        .navigationDestination(item: $destinationView) { destination in
            switch destination {
            case .user:
                UserView() // 替换成你的用户视图
            case .other:
                OtherView() // 替换成你的其他视图
            }
        }
    }
}

4. 修改登录函数，根据条件设置跳转目标 #

在login函数里，完成验证后给destinationView赋值即可触发跳转：

func login(name: String, pass: String) {
    // 这里替换成你的真实身份验证逻辑（比如调用API、本地校验）
    let isUserValid = (name == "user" && pass == "123") // 示例条件
    let isOtherRole = (name == "admin" && pass == "456") // 示例条件
    
    if isUserValid {
        destinationView = .user
    } else if isOtherRole {
        destinationView = .other
    }
    // 如果验证不通过，可以在这里加提示逻辑，比如弹出Alert
}

二、iOS15及以下兼容方案（NavigationView + 隐藏NavigationLink） #

如果需要兼容旧系统，可以用这种传统方式：

1. 添加状态变量控制跳转 #

struct LoginUIView: View {
    @State private var name = ""
    @State private var pass = ""
    // 新增：两个状态变量分别控制不同跳转
    @State private var shouldGoToUser = false
    @State private var shouldGoToOther = false
    
    // ... 其他代码
}

2. 改造视图结构，添加隐藏的NavigationLink #

把内容放在NavigationView里，并添加两个隐藏的NavigationLink，通过isActive绑定状态变量：

var body: some View {
    NavigationView {
        VStack {
            // 用户名、密码输入框等原有内容
            TextField("Username", text: $name)
                .padding()
                .border(.gray)
            SecureField("Password", text: $pass)
                .padding()
                .border(.gray)
            
            Button(action: { self.login(name: self.name, pass: self.pass) }) {
                Text("Login")
                    .padding()
                    .frame(maxWidth: .infinity)
                    .foregroundColor(Color.white)
                    .cornerRadius(4.0)
                    .background(Color("light-green"))
            }
            
            // 隐藏的跳转链接，通过isActive控制显示
            NavigationLink(destination: UserView(), isActive: $shouldGoToUser) {
                EmptyView()
            }
            NavigationLink(destination: OtherView(), isActive: $shouldGoToOther) {
                EmptyView()
            }
        }
        .padding()
    }
}

3. 修改登录函数触发跳转 #

func login(name: String, pass: String) {
    // 真实验证逻辑替换这里的示例条件
    let isUserValid = (name == "user" && pass == "123")
    let isOtherRole = (name == "admin" && pass == "456")
    
    if isUserValid {
        shouldGoToUser = true
    } else if isOtherRole {
        shouldGoToOther = true
    }
}

注意事项 #

• 记得把UserView和OtherView替换成你实际的视图结构
• 如果验证是异步操作（比如网络请求），要确保在主线程更新状态变量，否则跳转不会生效
• 验证不通过时，可以添加弹窗提示用户错误信息

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