SwiftUI如何实现类似UIKit中segue的模态页面跳转效果

你需要的底部弹出式模态跳转在SwiftUI中通过sheet或fullScreenCover修饰符即可实现，具体操作如下：

实现步骤 #

1. 首先在当前页面定义一个@State类型的布尔变量，用来控制模态页面的展示状态
2. 给触发跳转的控件添加点击事件，修改上述状态变量的值为true
3. 给当前页面添加sheet/fullScreenCover修饰符，绑定状态变量，指定弹出的目标页面

代码示例 #

首页触发代码 #

struct ContentView: View {
    // 控制登录页是否展示的状态变量
    @State private var showLoginView = false
    
    var body: some View {
        NavigationView {
            Button {
                showLoginView = true
            } label: {
                Text("Go To Next Step")
            }
            // 卡片式模态弹出（默认带下拉关闭手势，下层页面露出顶部）
            .sheet(isPresented: $showLoginView) {
                LoginScreenView()
            }
            // 如需全屏模态弹出（和UIKit的present全屏效果一致，无法下拉关闭），替换上面的sheet为下面的代码即可
            /*
            .fullScreenCover(isPresented: $showLoginView) {
                LoginScreenView()
            }
            */
        }
    }
}

目标页面增加关闭逻辑 #

你可以在目标页面通过系统提供的dismiss方法实现关闭返回，修改后的LoginScreenView代码如下：

struct LoginScreenView: View {
    // 读取系统提供的关闭方法（iOS 15+支持）
    @Environment(\.dismiss) private var dismiss
    
    var body: some View {
        NavigationView {
            Text("Hello, World!")
                .toolbar {
                    // 导航栏右侧添加关闭按钮
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button("关闭") {
                            dismiss()
                        }
                    }
                }
        }
    }
}

// iOS 14及更低版本的关闭写法：
/*
struct LoginScreenView: View {
    @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        NavigationView {
            Text("Hello, World!")
                .toolbar {
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button("关闭") {
                            presentationMode.wrappedValue.dismiss()
                        }
                    }
                }
        }
    }
}
*/

struct LoginScreenView_Previews: PreviewProvider {
    static var previews: some View {
        LoginScreenView()
            .previewDevice("iPhone 11")
            .previewInterfaceOrientation(.portrait)
    }
}

补充说明 #

• sheet和fullScreenCover的区别仅在于弹出的样式，你可以根据自己的交互需求选择
• 如果目标页面不需要自带导航栏，可以去掉LoginScreenView内部的NavigationView嵌套，减少冗余层级

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