SwiftUI实现NavigationLink全屏跳转且保留左滑返回

要实现你需要的效果，纯SwiftUI可以结合UIKit的导航控制器特性完成，核心是让TabBar在详情页push时不隐藏，同时让详情页视图覆盖TabBar，半滑返回时能看到TabBar的部分内容。以下是具体实现方案：

核心思路 #

• 禁用导航控制器的hidesBottomBarWhenPushed属性，让TabBar在push详情页时保持显示
• 让详情页视图延伸到底部安全区域之外，覆盖TabBar
• 保留原生左滑返回交互，因为依然使用导航栈的push操作

修改后的完整代码 #

import SwiftUI

// 自定义导航控制器，禁用push时隐藏TabBar的行为
class CustomNavigationController: UINavigationController {
    override func viewDidLoad() {
        super.viewDidLoad()
        // 关键设置：push时不隐藏底部TabBar
        hidesBottomBarWhenPushed = false
    }
}

// 将自定义导航控制器包装为SwiftUI视图
struct CustomNavigationView<Content: View>: UIViewControllerRepresentable {
    let content: Content
    
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }
    
    func makeUIViewController(context: Context) -> CustomNavigationController {
        let navController = CustomNavigationController()
        // 将SwiftUI视图包装为UIHostingController作为根视图
        let rootViewController = UIHostingController(rootView: content)
        navController.viewControllers = [rootViewController]
        return navController
    }
    
    func updateUIViewController(_ uiViewController: CustomNavigationController, context: Context) {
        // 更新根视图内容
        if let rootVC = uiViewController.viewControllers.first as? UIHostingController<Content> {
            rootVC.rootView = content
        }
    }
}

struct MainTabView: View {
    var body: some View {
        TabView {
            // 使用自定义导航视图替代原生NavigationView
            CustomNavigationView {
                List {
                    NavigationLink("First Detail", destination: DetailView(title: "First Detail"))
                    NavigationLink("Second Detail", destination: DetailView(title: "Second Detail"))
                    NavigationLink("Third Detail", destination: DetailView(title: "Third Detail"))
                }
                .navigationTitle("Home")
            }
            .tabItem { Label("Home", systemImage: "house") }

            Text("Second Tab")
                .tabItem { Label("Settings", systemImage: "gear") }
        }
    }
}

struct DetailView: View {
    let title: String

    var body: some View {
        ZStack {
            // 背景色忽略底部安全区域，覆盖TabBar
            Color.gray.ignoresSafeArea(edges: .bottom)
            Text(title).font(.largeTitle)
        }
        .navigationTitle(title)
        // 确保导航栏不被安全区域影响
        .navigationBarTitleDisplayMode(.inline)
    }
}

// 预览
struct MainTabView_Previews: PreviewProvider {
    static var previews: some View {
        MainTabView()
    }
}

代码说明 #

1. CustomNavigationController：继承自UINavigationController，在viewDidLoad中设置hidesBottomBarWhenPushed = false，这样push详情页时TabBar不会隐藏，而是留在底部。
2. CustomNavigationView：将自定义导航控制器包装为SwiftUI可使用的视图，把传入的SwiftUI内容作为导航控制器的根视图。
3. DetailView：使用ignoresSafeArea(edges: .bottom)让背景色延伸到底部安全区域之外，覆盖住下方的TabBar，实现全屏效果。
4. 保留左滑返回：因为依然使用原生的NavigationLink进行push操作，所以左滑返回的交互完全保留，半滑返回时会看到下方的TabBar，符合Telegram/WhatsApp的效果。

这种方案既满足了每个Tab使用独立导航视图的需求，又实现了详情页覆盖TabBar且保留左滑返回的效果，完全基于SwiftUI+UIKit的原生能力实现，没有额外的第三方依赖。

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