使用 SwiftUI 构建表单：综合指南

近年来开发工具最重要的进步之一是 SwiftUI 的到来，它允许开发人员使用声明性代码设计和构建用户界面。

SwiftUI 目前仅支持 iOS 13 及更新版本。 本教程需要 Xcode 11（或更高版本），我们将始终使用 Swift 5。

在本文中，我们将一起在 SwiftUI 中构建一个表单，所以您可以按照自己的节奏学习本教程——让我们抓紧时间开始吧！

• SwiftUI 简介

• 使用 SwiftUI 设置 Xcode 项目

• 创建文本字段

• 将组件转换为表单

• 创建切换

• 创建选择器

• 创建滑块

SwiftUI 简介

SwiftUI 是 Apple 生态系统的一次创新转变。 通过具有相同复杂性的声明性代码构建应用程序（使用更少的代码）使开发人员能够在 iOS 中快速开发应用程序。 凭借更简单、更快的 UI 模式，它在您使用 SwiftUI 时立即采用动态类型、暗模式、本地化和可访问性等功能。

SwiftUI 可在所有平台上访问，包括 macOS、iOS、iPadOS、watchOS 和 tvOS。 开发人员可以花更多时间高效地编写代码、制作特定于平台的功能、专注于 UI，因为使用 SwiftUI 节省了时间——简而言之，根据我的经验，它是一个非常有用的工具！

此外，Apple 生态系统允许您同时使用 SwiftUI 和 UIKit。 这对所有 iOS 开发人员来说都是一个很大的优势，可以更轻松地适应新的转变。

使用 SwiftUI 设置 Xcode 项目

首先，打开 Xcode 并 选择Create a new Xcode project 。 从菜单中

使用 iOS 时，选择 Single View Apps 。 是时候命名和描述你的应用了。 使用 SwiftUI 必须在底部选择 选项。 如果你不点击这个选项，Xcode 会为你创建故事板文件。

现在，Xcode 会自动创建一个名为 ContentView.swift，它会在右侧显示代码的实时预览，如下所示。 如果您还没有看到预览，只需点击预览窗格中的 Resume 按钮，一旦项目构建完成，您就可以看到预览。

借助新的即时预览功能，您可以输入代码并实时查看视觉变化，从而使整个编程体验更快，并让您看到发生的变化。

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验 了解更多 →

---

要使用 SwiftUI 构建表单，我们将开发不同的 UI 元素。 让我们一个一个地实现它们并更好地理解它们。

创建文本字段

让我们从使用文本标签和文本字段的简单实现开始。

// swift
Text("Name").font(.headline)

上面的行使用 Text组件并将该标签的值设置为 Name. 除此之外 。 font属性将其字体类型设置为 headline. 要使用占位符创建文本字段，您需要编写如下代码：

// swift
TextField(.constant(""), placeholder: Text("Enter your name"))

你需要告诉 SwiftUI 框架使用 VStack并根据需要排列两个组件，以便将标签放在文本字段上方。 下面的代码片段显示了如何执行此操作。

// swift
struct ContentView : View {
    var body: some View {
        VStack(alignment: .leading) {
​
            Text("Name").font(.headline)
            TextField(.constant(""), placeholder: Text("Enter your name"))
​
        }
    }
}

现在我们已经创建了基本的文本字段和标签，让我们改进外观。

// swift
struct ContentView : View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Name").fon