适用于 SwiftUI 应用程序的本机声明性路由

迅捷路由 🕊

适用于 SwiftUI 应用程序的本机声明性路由

设置时间:1 分钟

示例项目:https://github.com/SwiftfulThinking/SwiftfulRoutingExample

概述 🤓

SwiftUI 是一个声明式框架,因此,SwiftUI 路由器本质上应该是声明式的。基于编程代码的路由器不会提前声明视图层次结构,而是在执行时声明。解决方案是通过在每个 segue 目标的根目录下添加一组新的修饰符来提前声明所有修饰符以支持路由,其中目标是一个可选的类型擦除视图。这维护了声明性视图层次结构,同时允许开发人员在执行时仍确定目标。

设置 ☕️

添加您的 xcode 包

https://github.com/SwiftfulThinking/SwiftfulRouting.git

导入包

import SwiftfulRouting

添加一个RouterView

struct ContentView: View {
    var body: some View {
        RouterView {
            MyView()
        }
    }
}

将作为 的所有子视图提供。每个对象可以同时支持一个活动 segue、一个活动警报和一个活动模式。在每个 segue 之后,都会创建一个新路由器并将其添加到环境中。RouterEnvironmentObjectRouterViewRouter

struct MyView: View {

    @EnvironmentObject private var router: Router
    
    var body: some View {
        VStack {
            Text("Segue")
                .onTapGesture {
                    router.showScreen(.push) {
                        ThirdView()
                    }
                }
            
            Text("Alert")
                .onTapGesture {
                    router.showAlert(.alert, title: "Title") {
                        Button("OK") {
                            
                        }
                        Button("Cancel") {
                            
                        }
                    }
                }
            
            Text("Modal")
                .onTapGesture {
                    router.showModal {
                        ChildView()
                    }
                }
        }
    }
}

Segues ⏩

Router supports native SwiftUI segues, including .push (NavigationLink), .sheet, and .fullScreenCover.

router.showScreen(.push, destination: () -> View)
router.showScreen(.sheet, destination: () -> View)
router.showScreen(.fullScreenCover, destination: () -> View)
router.dismissScreen()

Alerts 🚨

Router supports native SwiftUI alerts, including .alert and .confirmationDialog.

router.showAlert(.alert, title: String, alert: () -> View)
router.showAlert(.confirmationDialog, title: String, alert: () -> View)
router.dismissAlert()

Modals 🪧

Router also supports any modal transition, which displays above the current content.

router.showModal(destination: () -> View)
router.showModal(
  transition: AnyTransition, 
  animation: Animation, 
  alignment: Alignment, 
  backgroundColor: Color?, 
  useDeviceBounds: Bool, 
  destination: () -> View)
router.dismissModal()

GitHub

点击跳转