SwiftUI学习-视图切换方式

1,748 阅读1分钟

视图切换方式

状态

通过当前的状态(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")
      }
    }
  }
}

image.png

image.png

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)
        }
      }
    }
}

image.png

image.png

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")
        }
      }
    }
}

image.png

image.png