SwiftUI学习-视图切换方式

视图切换方式

状态

通过当前的状态(e.g. @State、@StateObject、@ObservedObject...)来决定当前的SwiftUI View展示与否,且自带有动画效果。示例如下

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

Sheet

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

less 复制代码
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

调用示例如下

dart 复制代码
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)
        }
      }
    }
}

表示视图栈的View,该View表示导航层次结构中可见的路径。使用NavigationView创建一个基于导航的应用程序,用户可以在其中遍历视图集合。 用户通过选择你提供的NavigationLink导航到目标视图。在iPadOS和macOS上,目标内容将在下一栏中显示。 其他平台将一个新的View推入堆栈,并通过平台特定的控件(如后退按钮或滑动手势)从堆栈中删除项目。

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

示例如下:

css 复制代码
struct ContentView: View {
    var body: some View {
      NavigationView {
        NavigationLink {
          Text("Destination")
        } label: {
          Text("Show Text")
        }
      }
    }
}
相关推荐
传奇开心果编程3 天前
【SwiftUI提高练中学】第9课 安全与隐私
swiftui·移动开发·swift·编程语言理论·开发范式·编程框架·声明式ui
传奇开心果编程4 天前
【声明式UI开发实用技术学与练】第8课 状态提升与下放
学习·flutter·react native·ui·swiftui·composer
东坡肘子4 天前
Swift Server,又多了一个 Google -- 肘子的 Swift 周报 #156
人工智能·swiftui·swift
传奇开心果编程5 天前
【现代声明式UI学与练】第4课 列表渲染与 key——如何高效渲染列表、key 的作用、列表重排时的状态保持
学习·flutter·react native·ui·swiftui·android jetpack
传奇开心果编程5 天前
【SwiftUI提高练中学】第8课 网络层架构:拦截器、重试、缓存与离线优先
学习·macos·ui·ios·swiftui
传奇开心果编程5 天前
【现代声明式UI学与练】第7课 组件通信——父传子、子传父、跨层级通信、状态提升与 Context
学习·flutter·react native·ui·swiftui·android jetpack
tink6 天前
告别 Xcode IDE:用 VS Code + SweetPad + XcodeGen 开发 iOS 应用的完整指南
ios·swiftui·xcode
传奇开心果编程6 天前
【现代声明式UI学与练】第9课 性能优化——渲染优化、列表优化、内存优化、启动优化
学习·flutter·react native·ui·性能优化·swiftui·android jetpack
传奇开心果编程8 天前
【现代声明式UI学与练】第1课 从命令式UI到声明式UI
学习·flutter·ui·swiftui·react·android jetpack
传奇开心果编程9 天前
【SwiftUI提高练中学】第13课 实时活动与灵动岛:ActivityKit 实战
学习·ui·ios·swiftui·swift