SwiftUI - 事件处理
事件处理是一个过程，在这个过程中，我们捕获一个事件，然后使用点击、手势、长按等方式响应该事件。SwiftUI 支持各种机制来处理事件，并可以根据用户的交互触发操作。
与使用繁重方法或委托来处理事件的传统 UI 框架不同，SwiftUI 使用轻量级方法来处理事件。换句话说，在 SwiftUI 中，我们可以直接在用户界面代码中定义事件处理程序，而不是创建单独的事件侦听器。
SwiftUI 通过结合视图修饰符、状态管理和手势来处理事件，以便它可以轻松跟踪事件并快速响应。与传统框架相比，SwiftUI 的声明式方法使其更具可读性，并且处理事件所需的代码更少。
SwiftUI 中的事件类型
SwiftUI 支持各种类型的事件，允许开发人员响应各种用户交互。一些常见事件如下。
按钮操作:它是最常用的操作处理程序。它允许用户通过单击或点击它来响应它。它是一个内置事件处理程序，它带有一个操作参数，该参数定义按下按钮时会发生什么。因此，只要用户按下按钮，它就会始终执行。
例如，表单有一个提交按钮，因此每当用户单击提交按钮时，字段中输入的所有数据都将发送到服务器进行存储。所以这里单击按钮是操作，将数据发送到服务器是对该操作的响应。
手势:就像按钮一样，手势也是最常用的事件处理程序。手势是一种基于触摸或动作的交互，例如点击、滑动、捏合、拖动、长按等。
它可以使用这些手势处理用户交互。例如，每当用户长按屏幕时，就会显示一个元素列表，以便用户可以从该列表中选择任何操作。所以这里长按是手势，显示列表是对该手势的响应。
基于状态的事件:在 SwiftUI 中，我们可以使用 @State 和 @Binding 创建基于状态的事件。每当发生任何变化时，它都会更新状态属性。
出现和消失事件:它借助 .onAppear 和 .onDisappear 修饰符处理视图如何在屏幕上出现或消失。
滚动事件:它使用可滚动视图响应用户交互。它使用 ScrollViewReader 来处理滚动位置。
拖放事件:此事件支持应用中的拖放交互。它允许用户从视图中拖动任何项目并将其放在应用内外的任何位置。
输入事件:此事件允许用户通过在给定的文本字段、滑块、切换按钮等中输入数据来输入数据或与用户交互。它还允许应用响应用户正在输入、选择或修改的内容。 SwiftUI 提供了各种修饰符来捕获、响应和管理输入事件。
如何在 SwiftUI 中处理事件
在 SwiftUI 中，我们可以借助点击、拖动、长按等动作和手势来处理事件。处理事件的一些常用方法如下 −
按钮点击
按钮点击事件由 Button() 方法附带的动作参数处理。此参数保存每次单击或点击按钮时将执行的操作。单个视图可以有多个按钮。
示例
以下 SwiftUI 程序用于在我们单击显示按钮时显示数据。
import SwiftUI
struct ContentView: View {
@State private var input: String = ""
@State private var result: String = ""
var body: some View {
VStack {
TextField("Enter Your Name", text: $input).padding()
Button(action: {
// 使用输入字符串更新输出字符串
result = input
// 清除字段
input = ""
}) {
Text("Submit")
.padding()
.background(.brown)
.foregroundStyle(.white)
.cornerRadius(10)
}.padding()
// 显示输入的数据
if !result.isEmpty {
Text("Output Data: \(result)").font(.title3)
}
}
}
}
#Preview {
ContentView()
}
输出
手势修饰符
SwiftUII 提供各种手势处理程序，例如 TapGesture、LongPressGesture、DragGesture 等。每个手势都附加到任何视图以处理指定的交互，例如 tapGesture 处理视图上的单击或多次点击，longPressGesture 处理用户长按屏幕等。
示例
以下 SwiftUI 程序在用户点击文本时会更改文本的颜色。
import SwiftUI
struct ContentView: View {
@State private var myColor: Color = .red
var body: some View {
Text("Tap me to see the magic")
.font(.title)
.foregroundStyle(myColor)
// 文字颜色将会改变
// 当用户点击时变为蓝色
.onTapGesture {
myColor = .blue
}
}
}
#Preview {
ContentView()
}
输出
出现和消失事件
每当我们想要显示或消失容器或父视图或屏幕中的某个视图时，都会使用此事件。它可以借助 .onAppear 和 .onDisappear 修饰符来处理。当我们想要显示视图时，使用 .onAppear 修饰符，而每当我们清理资源或保存数据时，使用 .onDisappear 修饰符。
示例
以下 SwiftUI 程序应用出现和消失事件。
import SwiftUI
struct ContentView: View {
@State private var myText: String = "Hello"
@State private var Visibility: Bool = true
var body: some View {
VStack {
if Visibility {
Text(myText)
.font(.title)
.padding()
.onAppear {
// 文本出现时的操作
print("Display Text")
myText = "Welcome to TutorialsPoint"
}
.onDisappear {
// 文本消失时的操作
print("Remove Text")
myText = "Not Found"
}
}
Button(action: {
// 切换可见性
Visibility.toggle()
}) {
Text(Visibility ? "Hide Text" : "Display Text")
.padding()
.background(.blue)
.foregroundStyle(.white)
}
}
}
}
#Preview {
ContentView()
}
输出
@State 和 @Binding 用于交互式事件
在基于状态的事件中，我们使用 @State 和 @Binding 来记录视图状态的变化。它会根据变化自动更新状态。
示例
以下 SwiftUI 程序对滑块组件使用了状态和绑定。
import SwiftUI
struct ContentView: View {
// State variable
@State private var value: Double = 1.0
var body: some View {
VStack {
Text("Adjust the slider:").font(.title)
Slider(value: $value, in: 1...5).padding()
// 使用绑定将滑块传递到新视图
newView(value: $value)
}
}
}
struct newView: View {
// 从父视图接收的绑定变量
@Binding var value: Double
var body: some View {
Text("Selected Value: \(value, specifier: "%.2f")")
.font(.title)
}
}
#Preview {
ContentView()
}
输出
拖放事件
拖放事件用于将视图或组件从一个视图拖放到另一个位置或视图。.onDrag修饰符用于拖动数据，而.onDrop修饰符用于处理数据放置方式。
示例
以下SwiftUI程序用于将圆圈从一个位置拖放到另一个位置。
import SwiftUI
struct ContentView: View {
// 追踪位置
@State private var position = CGSize.zero
// 跟踪拖动偏移
@State private var dragOffsetValue = CGSize.zero
var body: some View {
VStack {
Text("Drag the circle")
.font(.title)
// 可拖拽圆圈
Circle()
.fill(.mint)
.frame(width: 100)
.offset(x: position.width + dragOffsetValue.width, y: position.height + dragOffsetValue.height)
.gesture(
DragGesture()
.onChanged { g in
// 拖动过程中更新偏移值
dragOffsetValue = g.translation
}
.onEnded { _ in
// 拖动完成后更新位置。
position.width += dragOffsetValue.width
position.height += dragOffsetValue.height
dragOffsetValue = .zero
}
)
.animation(.easeIn, value: position)
}
}
}
#Preview {
ContentView()
}
输出
输入事件
我们可以使用各种 UI 组件(如 TextField、Toggle、Slider 等)处理输入事件。这些 UI 组件从用户那里获取输入，并使用状态绑定和其他修饰符(如 .onSubmit、.onChange 等)来处理状态变化和用户响应。
示例
以下 SwiftUI 程序显示输入的数据。
import SwiftUI
struct ContentView: View {
@State private var name: String = ""
var body: some View {
VStack {
// 用于输入
TextField("Enter your name", text: $name)
.padding(10)
// 显示输入的数据
Text("Entered Data: \(name)!")
}
.padding()
}
}
#Preview {
ContentView()
}
输出
