在 WatchOS 上启动视图

Question

我正在创建一个 watchOS 应用程序并希望选择起始视图作为主屏幕的子视图。 WWDC20 video (time: 13:50) 称其为“分层导航”并展示了示例，但未提供任何代码。

我一直在寻找如何实现这一点，但找不到任何东西。我正在为 watchOS 7+ 完全在 SwiftUI 中构建应用程序。

如何从视图的子视图开始？

Answer 1

今天刚好打开SO发现了这个问题

如果我理解正确（基于你分享的 wwdc 视频），你想要做的是在你的主视图中打开一个子视图。

让我们根据我假设您想要做的事情设置一个示例。有一个入口点，我将其命名为 HomeView，用于托管您的导航视图和导航链接。您还将有两个视图（仅用于说明目的），我将调用 AView 和 BView.

如果我创建这个新应用程序 (StraightToDetailsApp)，主入口点应如下所示：

import SwiftUI

@main
struct StraightToTheDetailsApp: App {
  var body: some Scene {
    WindowGroup {
      Text("Hello world!")
    }
  }
}

让我们添加我们需要的三个新视图：

import SwiftUI

@main
struct StraightToTheDetailsApp: App {
  var body: some Scene {
    WindowGroup {
      // replaced ContentView with HomeView
      HomeView()
    }
  }
}

struct HomeView: View {
  var body: some Scene {
    NavigationView {
      ScrollView {
        // specified the navigation hierarchy from home. 
        NavigationLink("Hello A!!!", destination: AView())
        NavigationLink("Greetings B!!!", destination: BView())
      }
    }
  }
}

// Just made two simple views.
struct AView: View {
  var body: some Scene {
    VStack {
      Text("Hello from A")
    }.frame(
        minWidth: 0,
        maxWidth: .infinity,
        minHeight: 0,
        maxHeight: .infinity,
        alignment: .center)
     .background(Color.blue)
  }
}

struct BView: View {
  var body: some Scene {
    VStack {
      Text("Hello from B")
    }.frame(
        minWidth: 0,
        maxWidth: .infinity,
        minHeight: 0,
        maxHeight: .infinity,
        alignment: .center)
     .background(Color.blue)
  }
}

如果您现在启动您的应用程序，您将看到带有两个按钮的主页，点击它会触发应用程序中的导航。

由于您希望强制应用直接导航到其中一项，因此您需要提供可用于绑定变量的标识符，从而自动触发导航。这是什么意思？

// let's create accessors to those links that you can reference from 
// somewhere in your code.
// Perhaps, you have a view model maintaining this state.
enum Details {
  case a
  case b
}

// And let's adapt home view, with the appropriate state tracking
// the "tag"

struct HomeView: View {
  @State var selectedTag: Details? = nil

  var body: some View {
    NavigationView {
      ScrollView {
        NavigationLink(
          "Hello A!!!",
          destination: AView(),
          tag: Details.a,
          selection: self.$selected)

        NavigationLink(
          "Greetings B!!!",
          destination: BView(),
          tag: Details.b,
          selection: self.$selected)
      }
    }
  }
}

如果你启动你的应用程序，它会和以前差不多，但现在你可以为那个名为 selectedTag 的状态变量提供一个值，然后让它去任何你想去的地方。

struct HomeView: View {
  @State var selectedTag: Details? = .a

  var body: some View {
  // ...
  }
}

现在启动应用程序，应用程序将显示 AView，HomeView 堆叠在导航栏中。

在 WatchOS 上启动视图

Starting View on WatchOS

wwdc

apple-watch

watchos

swiftui