SwiftUI中点击Button实现页面跳转与返回功能的方法咨询
SwiftUI 页面跳转与返回实现方案
以下方案适配iOS 16+,采用系统推荐的NavigationStack实现导航栈管理,天然支持左滑返回手势与默认返回按钮。
1. 修改LoginView代码
修改点说明:
- 新增状态变量控制跳转触发
- 外层包裹
NavigationStack作为导航容器 - 按钮点击事件中修改状态变量触发跳转
- 新增
navigationDestination修饰符绑定跳转目标页
struct LoginView: View { // 控制是否跳转到Welcome页的状态变量 @State private var isShowWelcome = false var body: some View { // 导航容器包裹 NavigationStack { VStack{ Button(action: { print("*** Press go login view ****") // 修改状态触发跳转 isShowWelcome = true }) { Text("Login") .font(.custom(TextConstant.keyValues.front_name, size: 30)) .foregroundColor(.white) .fontWeight(.bold) .frame(minWidth: 0, maxWidth: .infinity) .padding(.all,20) // 原代码重复设置了foregroundColor,此处已删除无效的蓝色配置 .background(LinearGradient(gradient: Gradient(colors: [.green, .green]), startPoint: .leading, endPoint: .trailing)) .cornerRadius(10) } } // 绑定跳转状态与目标页 .navigationDestination(isPresented: $isShowWelcome) { WelcomeView() } // 可选:设置当前页导航栏标题 .navigationTitle("登录") } } }
2. 修改WelcomeView代码
如果不需要自定义返回按钮,系统会自动在导航栏左侧生成返回按钮,无需额外修改代码。如果需要自定义返回按钮,修改如下:
struct WelcomeView: View { // 获取页面退出方法 @Environment(\.dismiss) private var dismiss var body: some View { VStack { Text("Hello ") // 自定义返回按钮 Button("返回登录页") { // 调用退出方法返回上一页 dismiss() } .padding(.top, 20) } // 可选:设置当前页导航栏标题 .navigationTitle("欢迎页") // 可选:隐藏系统默认返回按钮,仅使用自定义返回时需要开启 // .navigationBarBackButtonHidden(true) } }
兼容iOS 15及更低版本方案
如果需要适配更低系统版本,只需把LoginView中的NavigationStack替换为NavigationView,其余逻辑保持一致即可。
内容的提问来源于stack exchange,提问作者Enamul Haque
相关产品推荐
相关产品推荐

