SwiftUI进阶篇

1. 状态管理

1.1 属性（@State）

        @State 属性包装器是用于声明视图的可变状态的核心工具。它使得视图能够持有和管理局部状态，并在状态发生变化时自动重新渲染视图。

1.1.1  @State 基本概念

@State 是 SwiftUI 中的一个属性包装器，用于标记视图内部状态。当 @State 属性的值发生变化时，SwiftUI 会自动更新使用该状态的视图，从而反映最新的状态。

• 示例代码

Swift struct CounterView: View {     @State private var count = 0          var body: some View {         VStack {             Text("Count: \(count)")                 .font(.largeTitle)                          Button(action: {                 count += 1             }) {                 Text("Increment")             }             .padding()         }     } }

在这个示例中：

• @State 属性包装器用来声明一个 count 变量，该变量在视图中作为局部状态。

• 当点击 "Increment" 按钮时，count 的值增加，SwiftUI 自动重新渲染 Text 视图以显示最新的计数值。

1.1.2 使用 @State 的特点

        局部状态管理：@State 只适用于视图的局部状态。如果需要在多个视图之间共享状态，可以使用@ObservedObject、@EnvironmentObject 或 @StateObject 等机制。

        自动视图更新：当 @State 属性的值发生变化时，SwiftUI 会自动重新计算并重新渲染使用该状态的视图。

        只能用于视图结构体：@State 属性只能在视图结构体中使用，并且必须是私有的。

1.2 绑定（@Binding）

@Binding：用于将视图的状态绑定到父视图中传递的状态。@Binding 使得子视图可以读写父视图的状态。

Swift struct ParentView: View {     @State private var isOn = false          var body: some View {         ToggleView(isOn: $isOn)     } } struct ToggleView: View {     @Binding var isOn: Bool          var body: some View {         Toggle("Toggle", isOn: $isOn)     } }

1.3 状态对象（@XXXObjet）

• @StateObject：用于创建和管理一个 ObservableObject 实例，确保在视图生命周期内只创建一次。

Swift class Counter: ObservableObject {     @Published var count = 0 } struct CounterView: View {     @StateObject private var counter = Counter()          var body: some View {         VStack {             Text("Count: \(counter.count)")                 .font(.largeTitle)                          Button(action: {                 counter.count += 1             }) {                 Text("Increment")             }             .padding()         }     } }

• @ObservedObject：用于观察外部可观察对象（ObservableObject）。适用于在多个视图之间共享和管理状态。

Swift class Counter: ObservableObject {     @Published var count = 0 } struct CounterView: View {     @ObservedObject var counter = Counter()          var body: some View {         VStack {             Text("Count: \(counter.count)")                 .font(.largeTitle)                          Button(action: {                 counter.count += 1             }) {                 Text("Increment")             }             .padding()         }     } }

• @EnvironmentObject：用于在视图层次结构中注入和共享数据，适用于全局状态。

Swift class UserSettings: ObservableObject {     @Published var isDarkMode = false } struct ContentView: View {     @EnvironmentObject var settings: UserSettings          var body: some View {         Toggle("Dark Mode", isOn: $settings.isDarkMode)     } }

2. 复杂布局

2.1 堆栈布局（VStack、HStack、ZStack）

堆栈布局（VStack、HStack 和 ZStack）是构建用户界面的基础布局组件。它们允许您将视图在垂直、水平和层叠方向上排列，从而实现复杂的布局结构。

2.1.1 VStack (垂直堆栈)

VStack 用于将视图垂直排列。它将子视图从上到下逐一显示，可以设置对齐方式、间距等属性。

• 基本用法,如SwiftUI入门篇

• 对齐方式和间距

Swift struct ContentView: View {     var body: some View {         VStack(alignment: .leading, spacing: 20) { //.leading 指定 VStack 内部视图的对齐方式为左对齐,20 设置了视图之间的间距为 20 点             Text("Item 1")             Text("Item 2")             Text("Item 3")         }         .padding()     } }

2.1.2 HStack (水平堆栈)

HStack 用于将视图水平排列。它将子视图从左到右逐一显示，可以设置对齐方式、间距等属性。

• 基本用法,如SwiftUI入门篇

• 对齐方式和间距

Swift struct ContentView: View {     var body: some View {         HStack(alignment: .top, spacing: 30) {//.top 指定了 HStack 内部视图的对齐方式为顶部对齐             Text("Item A")             Text("Item B")             Text("Item C")         }         .padding()     } }

2.1.3 ZStack (层叠堆栈)

ZStack 用于将视图层叠在一起。它允许视图在 Z 轴方向上叠放，通常用于创建复杂的重叠布局或背景层次效果。

• 基本用法

Swift struct ContentView: View {     var body: some View {         ZStack {             Color.blue                 .edgesIgnoringSafeArea(.all)                          VStack {                 Text("Top")                     .foregroundColor(.white)                 Text("Bottom")                     .foregroundColor(.white)             }         }     } }

• 对齐方式

Swift struct ContentView: View {     var body: some View {         ZStack(alignment: .bottomTrailing) { //指定了 Text 视图在 ZStack 中的对齐方式为底部右侧             Color.green                 .edgesIgnoringSafeArea(.all)                          Text("Bottom Right")                 .padding()                 .background(Color.white)                 .cornerRadius(8)         }     } }

2.2 嵌套布局和组合

可以将这些堆栈视图嵌套在一起以创建更复杂的布局结构。

Swift struct ContentView: View {     var body: some View {         VStack {             HStack {                 Text("Left")                 Text("Center")                 Text("Right")             }             .padding()                          ZStack {                 Color.gray                     .frame(height: 100)                                  VStack {                     Text("Overlay")                         .foregroundColor(.white)                 }             }         }     } }

在这个示例中：

• VStack 包含一个 HStack 和一个 ZStack。

• HStack 水平排列三个 Text 视图。

• ZStack 创建一个灰色背景层，并在其上叠加一个文本视图。

总结:

• VStack：用于垂直排列视图，支持对齐和间距设置。

• HStack：用于水平排列视图，支持对齐和间距设置。

• ZStack：用于在 Z 轴方向上层叠视图，适用于背景层次和重叠效果。

通过使用 VStack、HStack 和 ZStack，您可以构建灵活且强大的布局，满足不同的设计需求。

3. 动画和过渡

3.1 动画基础

3.1.1 动画基础概念

动画用于为视图的状态变化添加平滑的过渡效果。SwiftUI 中的动画是声明式的，您只需声明想要的动画效果，系统会自动处理动画过程。

• 动画声明式语法

在 SwiftUI 中，动画通常与视图状态的变化结合使用。通过修改视图状态，SwiftUI 会自动应用动画效果。要添加动画，您需要：

• 使用 @State 或 @Binding 来管理视图状态。
• 修改视图的状态来触发动画。
• 使用 .animation() 修饰符来指定动画效果。

3.2 动画的基本用法

3.2.1 简单动画

以下是一个基本的动画示例，通过点击按钮改变视图的背景颜色并使用动画效果平滑过渡。

Swift struct ContentView: View {     @State private var isAnimating = false     var body: some View {         VStack {             Rectangle()                 .fill(isAnimating ? Color.red : Color.blue)                 .frame(width: 200, height: 200)                 .animation(.easeInOut(duration: 1.0)) // 添加动画                 .onTapGesture {                     isAnimating.toggle() // 修改状态以触发动画                 }                          Text("Tap the square to animate")                 .padding()         }     } }

在这个示例中：

• Rectangle 的背景颜色在 isAnimating 状态改变时平滑过渡。

• .animation(.easeInOut(duration: 1.0)) 指定了动画的类型和持续时间。

• isAnimating.toggle() 切换状态以触发动画效果。

3.2.2 隐藏与显示动画

可以使用动画效果平滑地隐藏或显示视图。

Swift struct ContentView: View {     @State private var isVisible = true          var body: some View {         VStack {             if isVisible {                 Text("Hello, SwiftUI!")                     .transition(.slide) // 指定过渡效果             }                          Button(action: {                 withAnimation {                     isVisible.toggle() // 使用动画平滑状态变化                 }             }) {                 Text(isVisible ? "Hide" : "Show")             }         }         .padding()     } }

在这个示例中：

• Text 视图在 isVisible 状态改变时使用 .transition(.slide) 进行滑动过渡效果。

• withAnimation 用于在状态变化时启用动画。

3.3 常见动画类型

SwiftUI 提供了多种内置的动画类型，可以通过 .animation() 修饰符应用。

• 线性动画：匀速过渡。

Swift .animation(.linear(duration: 1.0))

• 弹性动画：模拟弹跳效果。

Swift .animation(.spring(response: 0.5, dampingFraction: 0.5, blendDuration: 0))

• 缓动动画：开始和结束时速度较慢，中间加速。

Swift .animation(.easeInOut(duration: 1.0))

• 自定义动画：可以定义自己的动画曲线。

Swift .animation(Animation.timingCurve(0.25, 0.1, 0.25, 1.0, duration: 1.0))

3.4 关键帧动画

关键帧动画允许您在动画过程中定义多个状态变化。

Swift struct ContentView: View {     @State private var scale: CGFloat = 1.0          var body: some View {         VStack {             Rectangle()                 .fill(Color.blue)                 .frame(width: 100, height: 100)                 .scaleEffect(scale)                 .animation(                     Animation.spring(response: 0.5, dampingFraction: 0.5, blendDuration: 0)//弹跳效果                         .repeatForever(autoreverses: true)                 )                 .onAppear {                     scale = 2.0 // 启动动画                 }         }     } }

3.5 动画的性能优化

为了优化动画性能，您可以考虑以下几点：

• 减少视图层级：减少视图层级和复杂度，以减少渲染开销。

• 避免重绘：只动画化需要变化的部分，避免整个视图的重绘。

• 使用 .transaction()：控制动画的事务属性，例如禁止动画中的视图更改。

SwiftUI 的动画机制使得创建动态和交互式用户界面变得非常简单。通过使用 @State 和 .animation() 修饰符，您可以轻松地为视图添加平滑的过渡效果。SwiftUI 提供了多种内置动画类型和自定义动画选项，可以满足各种设计需求。掌握动画基础将帮助您创建更加生动和引人入胜的应用程序体验。