WWDC 23 之后的 SwiftUI 有哪些新功能-编程知识

文章目录

- 前言
- 数据流
- 动画
- ScrollView
- 搜索
- 新手势
- 新增的小功能
- 总结

在这里插入图片描述

前言

WWDC 23 已经到来，SwiftUI 框架中有很多改变和新增的功能。在本文中将主要介绍 SwiftUI 中数据流、动画、ScrollView、搜索、新手势等功能的新变化。

数据流

Swift 5.9 引入了宏功能，成为 SwiftUI 数据流的核心。SwiftUI 不再使用 Combine，而是使用新的 Observation 框架。Observation 框架为我们提供了 Observable 协议，必须使用它来允许 SwiftUI 订阅更改并更新视图。

@Observable
final class Store {var products: [String] = []var favorites: [String] = []func fetch() async {try? await Task.sleep(nanoseconds: 1_000_000_000)// load productsproducts = ["Product 1","Product 2"]}
}

不需要在代码中遵循 Observable 协议。相反，可以使用 @Observable 宏来标记你的类型，它会自动为符合 Observable 协议。也不再需要 @Published 属性包装器，因为 SwiftUI 视图会自动跟踪任何可观察类型的可用属性的更改。

struct ProductsView: View {@State private var store = Store()var body: some View {List(store.products, id: \.self) { product inText(verbatim: product)}.task {if store.products.isEmpty {await store.fetch()}}}
}

以前，有一系列的属性包装器，如 State、StateObject、ObservedObject 和 EnvironmentObject，你应该了解何时以及为何使用它们。

现在，状态管理变得更加简单。对于值类型（如字符串和整数）和符合 Observable 协议的引用类型，只需使用 State 属性包装器。

struct FavoriteProductsView: View {let store: Storevar body: some View {List(store.favorites, id: \.self) { product inText(verbatim: product)}}
}

在上面的示例中，有一个接受 Store 类型的视图。在之前的 SwiftUI 框架版本中，应该使用 @ObservedObject 属性包装器来订阅更改。现在不需要了，因为 SwiftUI 视图会自动跟踪符合 Observable 协议的类型的更改。

struct EnvironmentViewExample: View {@Environment(Store.self) private var storevar body: some View {Button("Fetch") {Task {await store.fetch()}}}
}struct ProductsView: View {@State private var store = Store()var body: some View {List(store.products, id: \.self) { product inText(verbatim: product)}.task {if store.products.isEmpty {await store.fetch()}}.toolbar {NavigationLink {EnvironmentViewExample()} label: {Text(verbatim: "Environment")}}.environment(store)}
}

还可以使用 Environment 属性包装器与 environment 视图修饰符配对，将可观察类型放入 SwiftUI 环境中。不需要使用 @EnvironmentObject 属性包装器或 environmentObject 视图修饰符。同样的 Environment 属性包装器现在适用于可观察类型。

struct BindanbleViewExample: View {@Bindable var store: Storevar body: some View {List($store.products, id: \.self) { $product inTextField(text: $product) {Text(verbatim: product)}}}
}

每当需要从可观察类型中提取绑定时，可以使用新的 Bindable 属性包装器。

动画

动画始终是 SwiftUI 框架中最重要的部分。在 SwiftUI 中轻松实现任何动画，但之前的框架版本缺少一些现在具有的功能。

struct AnimationExample: View {@State private var value = falsevar body: some View {Text(verbatim: "Hello").scaleEffect(value ? 2 : 1).onTapGesture {withAnimation {value.toggle()} completion: {print("Animation have finished")}}}
}

如上例所示，我们有了新版本的 withAnimation 函数，允许提供动画完成处理程序。这是一个很好的补充，现在您可以构建阶段性动画。

enum Phase: CaseIterable {case startcase loadingcase finishvar offset: CGFloat {// Calculate offset for the particular phaseswitch self {case start: 100.0case loading: 0.0case finish: 50.0}}
}struct PhasedAnimationExample: View {@State private var value = falsevar body: some View {PhaseAnimator(Phase.allCases, trigger: value) { phase inLoadingView().offset(x: phase.offset)} animation: { phase inswitch phase {case .start: .easeIn(duration: 0.3)case .loading: .easeInOut(duration: 0.5)case .finish: .easeOut(duration: 0.1)}}}
}

SwiftUI 框架引入了新的 PhaseAnimator 视图，它遍历阶段序列，允许为每个阶段提供不同的动画，并在阶段更改时更新内容。还有 KeyframeAnimator 视图，可以使用关键帧来实现动画。

ScrollView

今年 ScrollView 有了很多优秀的新增功能。首先，可以使用 scrollPosition 视图修饰符来观察内容偏移量。

struct ContentView: View {@State private var scrollPosition: Int? = 0var body: some View {ScrollView {Button("Scroll") {scrollPosition = 80}ForEach(1..<100, id: \.self) { number inText(verbatim: number.formatted())}.scrollTargetLayout()}.scrollPosition(id: $scrollPosition)}
}

如上例所示，使用 scrollPosition 视图修饰符将内容偏移量绑定到一个状态属性上。每当用户滚动视图时，它会通过设置第一个可见视图的标识来更新绑定。还可以通过编程方式滚动到任何视图，但是，应该使用 scrollTargetLayout 视图修饰符来告诉 SwiftUI 框架在哪里查找标识以更新绑定。

struct ContentView: View {var body: some View {ScrollView {ForEach(1..<100, id: \.self) { number inText(verbatim: number.formatted())}.scrollTargetLayout()}.scrollTargetBehavior(.paging)}
}

可以通过使用 scrollTargetBehavior 视图修饰符来更改滚动行为。它允许在滚动视图中启用分页。

搜索

与搜索相关的视图修饰符也有一些很好的新增功能。例如，可以通过编程方式聚焦到搜索字段。

struct ProductsView: View {@State private var store = Store()@State private var query = ""@State private var scope: Scope = .defaultvar body: some View {List(store.products, id: \.self) { product inText(verbatim: product)}.task {if store.products.isEmpty {await store.fetch()}}.searchable(text: $query, isPresented: .constant(true), prompt: "Query").searchScopes($scope, activation: .onTextEntry) {Text(verbatim: scope.rawValue)}}
}

如上例所示，可以使用可搜索视图修饰符的 isPresented 参数来显示/隐藏搜索字段。还可以使用 searchScopes 视图修饰符的 activation 参数来定义范围的可见性逻辑。

新手势

新增的 RotateGesture 和 MagnifyGesture 使我们能够跟踪视图的旋转和放大。

struct RotateGestureView: View {@State private var angle = Angle(degrees: 0.0)var rotation: some Gesture {RotateGesture().onChanged { value inangle = value.rotation}}var body: some View {Rectangle().frame(width: 200, height: 200, alignment: .center).rotationEffect(angle).gesture(rotation)}
}

新增的小功能

增加了全新的 ContentUnavailableView 类型，当需要显示空视图时可以使用它。示例如下：

struct ProductsView: View {@State private var store = Store()var body: some View {List(store.products, id: \.self) { product inText(verbatim: product)}.background {if store.products.isEmpty {ContentUnavailableView("Products list is empty", systemImage: "list.dash")}}.task {if store.products.isEmpty {await store.fetch()}}}
}

还有新增了新的视图修饰符，允许调整列表中的间距。可以使用 listRowSpacing 和 listSectionSpacing 视图修饰符来设置列表中所需的间距。EnvironmentValues 结构体包含了一系列与最新平台更新相关的新属性，例如 isActivityFullscreen 和 showsWidgetContainerBackground。Swift Charts 也具有可滚动和可动画的功能。