近年来开发工具最重要的进步之一是 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