SwiftUI for Swift:完整指南与示例

面向初学者的在线Python训练器

轻松学习Python,无需理论负担。在浏览器中直接解决带自动检查的实践任务,无需安装任何东西。

开始课程

什么是 SwiftUI 以及为什么需要它?



SwiftUI 是一个现代的、声明式的框架,用于在 Apple 所有平台上构建用户界面:iOS、macOS、watchOS 和 tvOS。与传统的 UIKit 方法(您手动管理状态和更新视图)不同,SwiftUI 允许您描述界面应该是什么样子,而不是如何构建它。该框架会自动跟踪数据变化,并仅重新绘制界面中发生变化的部分。



为什么需要它?

  • 更少的代码:同一套代码可在所有 Apple 平台上运行。
  • 声明式:您将界面描述为一组简单的结构,而不是一系列命令。
  • 自动状态管理:@State、@Binding、@ObservableObject — SwiftUI 自行决定何时重新绘制界面。
  • 实时预览:在 Xcode 中,您可以实时看到更改。
  • 动画:添加动画只需一行代码。


SwiftUI 不是一个需要单独安装的库。它是一个内置框架,从 iOS 13、macOS 10.15、watchOS 6 和 tvOS 13 开始可用。它随 Xcode 和 Apple SDK 一起提供。



安装(项目设置)



由于 SwiftUI 是标准 Apple SDK 的一部分,因此无需通过 pip、npm 或 CocoaPods 安装。您所需要的只是 Xcode(版本 11 或更高)以及一个针对 iOS 13+ / macOS 10.15+ 配置的项目。



如何创建带有 SwiftUI 的新项目:

  1. 打开 Xcode。
  2. 选择 File → New → Project。
  3. 选择 "App" 模板(或在更旧版本中选择 "SwiftUI App")。
  4. 确保 "Interface" 字段中选择了 "SwiftUI"。
  5. 点击 "Next" 并创建项目。


如果您正在处理现有的 UIKit 项目,可以添加一个 SwiftUI 文件(File → New → File → SwiftUI View)。SwiftUI 和 UIKit 可以通过 UIHostingController 在同一个项目中共存。



快速入门与代码示例



让我们创建一个简单的 "点击计数器" 应用程序。这是一个经典示例,展示了 SwiftUI 的基本概念:状态、按钮和文本。



import SwiftUI

struct ContentView: View { // @State — 这是一个存储状态的属性,当它发生变化时,会自动重新绘制 View @State private var count = 0

var body: some View { VStack(spacing: 20) { Text("计数器: \\(count)") .font(.largeTitle) .padding()

HStack(spacing: 20) { Button("增加") { count += 1 } .padding() .background(Color.blue) .foregroundColor(.white) .cornerRadius(10)

Button("重置") { count = 0 } .padding() .background(Color.red) .foregroundColor(.white) .cornerRadius(10) } } }}

// 应用程序入口点@mainstruct MyApp: App { var body: some Scene { WindowGroup { ContentView() } }}


解释:

  • @State — 告诉 SwiftUI 需要跟踪此属性。当 count 发生变化时,SwiftUI 会自动重新绘制 ContentView。
  • VStack 和 HStack — 是用于垂直和水平排列元素的容器。
  • Button — 创建一个按钮,点击时执行闭包。
  • 修饰符(.font()、.padding()

推荐