Swiftui 路由设计：开启 App 的新征程

2022-12-02 07:21:45

Swiftui 路由设计指南：无缝导航和提升用户体验

什么是 Swiftui 路由设计？

在 iOS 开发中，路由是指在应用程序页面之间移动。传统路由管理需要复杂的类库，而 Swiftui 路由提供了一种更优雅的解决方案。它允许您轻松地在视图之间切换，简化开发过程并提升用户体验。

示例一：基本导航

struct ContentView: View {
  @State private var showDetailView = false

  var body: some View {
    VStack {
      Button(action: {
        self.showDetailView = true
      }) {
        Text("Show Detail View")
      }
      .sheet(isPresented: $showDetailView) {
        DetailView()
      }
    }
  }
}

struct DetailView: View {
  var body: some View {
    Text("This is the detail view")
  }
}

这个示例展示了如何从 ContentView 导航到 DetailView。通过使用 @State 属性和 sheet() 修改器，您可以管理视图的可见性并无缝地在它们之间切换。

示例二：带参数的导航

struct ContentView: View {
  @State private var showDetailView = false
  @State private var selectedItem: String?

  var body: some View {
    VStack {
      Button(action: {
        self.selectedItem = "Item A"
        self.showDetailView = true
      }) {
        Text("Show Detail View for Item A")
      }
      .sheet(isPresented: $showDetailView) {
        DetailView(item: selectedItem)
      }
    }
  }
}

struct DetailView: View {
  let item: String?

  var body: some View {
    Text("This is the detail view for item: \(item!)")
  }
}

此示例演示了如何向目标视图传递参数。通过将 selectedItem 作为 DetailView 的初始化器参数，您可以轻松地将数据从一个视图传递到另一个视图。

示例三：嵌套导航

struct ContentView: View {
  @State private var showDetailView = false
  @State private var showNestedDetailView = false

  var body: some View {
    VStack {
      Button(action: {
        self.showDetailView = true
      }) {
        Text("Show Detail View")
      }
      .sheet(isPresented: $showDetailView) {
        DetailView()
      }
    }
  }
}

struct DetailView: View {
  @State private var showNestedDetailView = false

  var body: some View {
    VStack {
      Button(action: {
        self.showNestedDetailView = true
      }) {
        Text("Show Nested Detail View")
      }
      .sheet(isPresented: $showNestedDetailView) {
        NestedDetailView()
      }
    }
  }
}

struct NestedDetailView: View {
  var body: some View {
    Text("This is the nested detail view")
  }
}