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

输出