为 SwiftUI Apple Watch App 实现基于页面的导航 [英] Implementing Page Based Navigation for SwiftUI Apple Watch App

问题描述

我正在使用 SwiftUI 构建 Apple Watch 应用，并希望实现基于页面的导航，因此当用户在主屏幕上向左滑动时，他们会被带到另一个视图.

I'm building an Apple Watch app in SwiftUI and would like to implement page based navigation so when users swipe left on the home screen, they are taken to another view.

我了解如何使用 NavigationLink 让用户从一个屏幕移动到另一个屏幕，但不了解如何让用户通过向左或向右滑动来从一个屏幕导航到另一个屏幕.

I understand how to use NavigationLink to let users move from one screen to another, but not how to let users navigate from screen to screen by swiping left or right.

有谁知道如何做到这一点?

Does anyone know how this can be done?

推荐答案

这里是如何使用 SwiftUI 为 watchOS 实现基于页面的导航的指南.描述基于Hacking with watchOS, SwiftUI edition:

Here is a guide how to implement page-based navigation for watchOS using SwiftUI. The description is based on Hacking with watchOS, SwiftUI edition:

首先，创建一个新的 SwiftUI 视图，例如 CounterView.

First, create a new SwiftUI view, for example called CounterView.

其次，创建 WKHostingController 的子类以显示新的 SwiftUI 视图.只需复制 HostingController.swift 中已经存在的控制器并将其名称更改为 CounterHostingController.文件 HostingController.swift 然后包含这两个控制器:

Secondly, create a subclass of WKHostingController to show that new SwiftUI view. Just copy the controller already existing in HostingController.swift and change its name to CounterHostingController. The file HostingController.swift then contains these two controllers:

class HostingController: WKHostingController<ContentView> {
    override var body: ContentView {
        return ContentView()
    }
}

class CounterHostingController: WKHostingController<CounterView> {
    override var body: CounterView {
        return CounterView()
    }
}

第三，通过打开文件 Interface.storyboard 并单击 Xcode 窗口右上角的 + 按钮，创建一个故事板场景来存储新创建的主机控制器.在搜索框中输入Hosting Controller"，拖出一个新的 Hosting Controller 并将其移动到现有的 Hosting Controller 旁边.在身份检查器中(单击 Xcode 窗口右侧从顶部数第二个菜单中的第四个项目，该项目显示一个文档，左上角有一张图片，周围有文字浮动)，将 Class 更改为"CounterHostingController"，然后选中从目标继承模块"框.

Thirdly, create a storyboard scene to store that newly created hosting controller by opening the file Interface.storyboard and clicking the + button in the top right of the Xcode window. Type in "Hosting Controller" in the search box, drag out a new Hosting Controller and move it next to the existing Hosting Controller. In the identity inspector (click on the fourth item in the second menu from the top on the right side of the Xcode window, the one showing a document with a picture on the top left corner and text floating around it), change Class to "CounterHostingController", then check the "Inherit Module From Target" box.

第四，为了将这两个屏幕连接为同一用户界面的页面，在情节提要中按 Ctrl 并用鼠标单击原始主机控制器并按住键，同时将鼠标指针拖动到新控制器上，然后，释放鼠标按钮后，选择下一页"进行关系segue.

Fourth, in order to connect these two screens as pages of the same user interface, in the storyboard press Ctrl and click with the mouse on the original hosting controller and hold the keys while dragging the mouse pointer onto the new controller and, after releasing the mouse button, select "next page" for the relationship segue.

这篇关于为 SwiftUI Apple Watch App 实现基于页面的导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！