视图切换方法

状况

经过当时的状况(e.g. @State@StateObject@ObservedObject…)来决定当时的SwiftUI View展示与否,且自带有动画作用。示例如下

struct ContentView: View {
  @State var show = true
  var body: some View {
    VStack {
      Button("Show Text") {
        show.toggle()
        print(show)
      }
      if show {
        Text("Show")
      }
    }
  }
}

SwiftUI学习-视图切换方式

SwiftUI学习-视图切换方式

Sheet

隐式地启动/嵌入新的VC,类似于iOS开发中的presentViewController,SwiftUI供给如下两个API。

public func sheet<Item, Content>(item: Binding<Item?>,
                                 onDismiss: (() -> Void)? = nil,
                                 @ViewBuilder content: @escaping (Item) -> Content)
-> some View where Item : Identifiable, Content : View
public func fullScreenCover<Content>(isPresented: Binding<Bool>,
                                     onDismiss: (() -> Void)? = nil,
                                     @ViewBuilder content: @escaping () -> Content)
-> some View where Content : View

调用示例如下

struct ContentView: View {
  @State var show = false
    var body: some View {
      Button("Show Text") {
          show.toggle()
          print(show)
      }.sheet(isPresented: $show) {
        Button("Hide Text") {
            show.toggle()
            print(show)
        }
      }
    }
}

SwiftUI学习-视图切换方式

SwiftUI学习-视图切换方式

NavigationView

表明视图栈的View,该View表明导航层次结构中可见的途径。运用NavigationView创立一个基于导航的应用程序,用户能够在其中遍历视图集合。 用户经过选择你供给的NavigationLink导航到方针视图。在iPadOS和macOS上,方针内容将在下一栏中显现。 其他渠道将一个新的View推入堆栈,并经过渠道特定的控件(如后退按钮或滑动手势)从堆栈中删除项目。

在macOS上显现多列导航视图,在iOS上显现视图堆栈的图表(类比的UINavigationController)

示例如下:

struct ContentView: View {
    var body: some View {
      NavigationView {
        NavigationLink {
          Text("Destination")
        } label: {
          Text("Show Text")
        }
      }
    }
}

SwiftUI学习-视图切换方式

SwiftUI学习-视图切换方式