🗺️ 导航器 (Dǎo háng qì)

利用 SwiftUI 的强大功能增强您的基于 UIKit 的项目。 本指南提供了一个全面的示例,展示了如何集成 SwiftUI 视图以用于各种导航场景,包括 push、模态呈现 (modal presentation)、底部表单 (bottom sheets)、警报框 (alerts) 和操作表 (action sheets)。 通过利用 SwiftUI 的简洁性和 UIKit 的稳健性,您可以创建无缝且动态的用户体验。

✔️ 使用示例 (Shǐyòng shìlì)

设置和启动导航器 (Shèzhì hé qǐdòng dǎo háng qì)

配置您的 SceneDelegate,以使用自定义的 Navigator 类初始化和显示您的 SwiftUI 视图。
此设置确保您的 SwiftUI 视图已正确嵌入到 UIKit 环境中。

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        
        guard let scene = (scene as? UIWindowScene) else { return }
        window = UIWindow(frame: scene.coordinateSpace.bounds)
        window?.windowScene = scene
        
        let navigator = Navigator()
        navigator.start { ContentView() }

        /*
        Optional: Inject Navigator into your ViewModel
        navigator.start {
          let viewModel = ContentViewModel(navigator: navigator)
          return ContentView(viewModel: viewModel)
        }
        */

        window?.rootViewController = navigator.view
        window?.makeKeyAndVisible()
    }
}

使用 Push 进行导航 (Shǐyòng Push jìnxíng dǎo háng)

使用 push 方法轻松导航到新视图。
此方法将目标视图添加到导航堆栈。

var navigator: Navigator?
navigator.push {
    DesinationView()
}

模态呈现 (Mótài chéngxiàn)

使用 present 方法在当前上下文中以模态方式显示视图。

var navigator: Navigator?
navigator.present {
    DesinationView()
}

显示底部表单 (Xiǎnshì dǐbù biǎodān)

调用 bottomSheet 方法将视图显示为底部表单,这是现代应用中流行的 UI 模式。

var navigator: Navigator?
navigator.bottomSheet {
    DesinationView()
}

显示警报框 (Xiǎnshì jǐngbào kuàng)

轻松显示带有可自定义按钮和操作的警报框。

var navigator: Navigator?
let parameter = AlertParameter(
    message: "Message",
    buttons: [
        .init(title: "default", action: { }),
        .init(title: "cancel", style: .cancel, action: { })
    ]
)
navigator.alert(parameter)

使用操作表 (Shǐyòng cāozuò biǎo)

与警报框类似,操作表可以显示各种选项。

var navigator: Navigator?
let parameter = AlertParameter(
    message: "Message",
    buttons: [
        .init(title: "default", action: { }),
        .init(title: "cancel", style: .cancel, action: { })
    ]
)
navigator.actionSheet(parameter)