SwiftUI 学习笔记（三）：用户输入处理

使用 SwiftUI 处理用户输入：构建交互式应用程序的指南

前言

在构建交互式应用程序时，处理用户输入至关重要。SwiftUI 提供了一系列强大的工具，使您可以轻松实现这一功能，从而创建响应用户操作的应用程序。让我们深入探讨 SwiftUI 中处理用户输入的各种方法。

绑定：双向数据流

绑定是连接 UI 元素和数据模型的关键。它允许用户输入自动反映在数据模型中，反之亦然。例如，绑定一个文本字段将使任何输入都实时更新数据模型中的关联变量。

@Binding var name: String
TextField("姓名", text: $name)

状态变量：管理 UI 状态

状态变量存储与 UI 相关的信息。与绑定不同，状态变量不会自动更新 UI。您需要手动更新它们以反映 UI 更改。这对于处理不应实时更新的设置或信息非常有用。

@State var isLoggedIn: Bool
Toggle("启用通知", isOn: $isNotificationsEnabled)

动作：响应用户交互

动作是用户执行操作时触发的函数。例如，当用户点击按钮时，可以调用一个动作来处理用户登录。

@IBAction func login() {
  // 处理用户登录
}
Button("登录") { login() }

表单：收集用户输入

表单提供了组织和收集用户输入的便捷方式。您可以使用 SwiftUI 提供的各种 UI 元素（如文本字段、开关和分段控件）来创建表单。

文本字段：获取文本输入

文本字段允许用户输入文本。使用 TextField 视图创建它们，并通过绑定它们将输入与数据模型相关联。

TextField("姓名", text: $name)

开关：启用/禁用设置

开关用于切换设置的启用/禁用状态。使用 Toggle 视图创建它们，并通过绑定它们将状态与数据模型相关联。

Toggle("启用通知", isOn: $isNotificationsEnabled)

分段控件：在选项之间进行选择

分段控件允许用户在有限数量的选项之间进行选择。使用 SegmentedControl 视图创建它们，并通过绑定它们将所选选项与数据模型相关联。

SegmentedControl(selection: $selectedColor, cases: ["红色", "绿色", "蓝色"])

选择器：从列表中进行选择

选择器允许用户从选项列表中进行选择。使用 Picker 视图创建它们，并通过绑定它们将所选选项与数据模型相关联。

Picker("最喜欢的水果", selection: $selectedFruit) {
  ForEach(fruits, id: \.self) { fruit in
    Text(fruit)
  }
}

列表：显示和组织数据

列表用于显示和组织数据。使用 List 视图创建它们，并使用各种 UI 元素（如文本、图像和按钮）填充列表项。

List(fruits, id: \.self) { fruit in
  Text(fruit)
}

导航链接：在视图之间导航

导航链接允许用户在应用程序的不同视图之间导航。使用 NavigationLink 视图创建它们，并将其链接到目标视图。

NavigationLink(destination: UserDetailView()) {
  Text("查看详情")
}

结论

掌握 SwiftUI 中处理用户输入的技巧对于构建响应用户交互的应用程序至关重要。通过绑定、状态变量、动作、表单、文本字段、开关、分段控件、选择器、列表和导航链接，您可以轻松创建直观且用户友好的应用程序。

常见问题解答

1. 我如何绑定一个文本字段来更新数据模型？
   使用 @Binding 属性包装器将文本字段与数据模型中的变量关联起来。

2. 状态变量与绑定的区别是什么？
   绑定自动更新 UI，而状态变量需要手动更新。

3. 如何创建当用户点击按钮时执行操作？
   使用 @IBAction 属性包装器将按钮与一个动作关联起来。

4. 我可以在表单中使用哪些 UI 元素？
   SwiftUI 提供了各种元素，如文本字段、开关、分段控件和选择器。

5. 如何使用列表显示数据？
   使用 List 视图并通过循环遍历数据集合来填充列表项。