2

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

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

如何从视图的子级开始？

4

1 回答 1

3

今天刚好打开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堆叠显示。

于 2021-03-16T02:03:06.727 回答