第一个 SwiftUI 应用

让我们来创建一个简单的 SwiftUI 应用，展示 SwiftUI 的基本结构和使用方式。这个应用将显示一段文本和一个按钮，点击按钮后文本将发生变化。

前提条件

  • Xcode 11 及以上版本
  • macOS 10.15 及以上版本

创建项目

  1. 打开 Xcode，选择“Create a new Xcode project”。
  2. 在模板选择中选择“App”，点击“Next”。
  3. 输入项目名称（如“HelloSwiftUI”），确保选择 SwiftUI 作为界面框架。
  4. 点击“Next”，选择保存位置，然后点击“Create”。

编写 SwiftUI 代码

Xcode 创建的 SwiftUI 项目会包含一个默认的文件 ContentView.swift。打开这个文件，你会看到一个 SwiftUI 界面定义的示例代码：

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
            .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

代码解析

  • struct ContentView: View：定义了一个 SwiftUI 视图，遵循 View 协议。
  • body：这是 View 协议要求的唯一属性，描述视图的内容和布局。
  • Text("Hello, SwiftUI!")：显示文本 "Hello, SwiftUI!"。
  • .padding()：为视图添加一些填充，使其不贴边显示。

运行实时预览

在 Xcode 的右侧面板中，你可以看到实时预览区域。点击 “Resume” 按钮，Xcode 将显示 ContentView 的实时预览，便于查看代码效果。

添加交互功能

接下来，我们将为应用添加一个按钮，当用户点击按钮时，文本内容会改变。

修改代码

我们可以通过 @State 属性包装器来存储视图中的状态，使得在状态改变时 SwiftUI 能自动更新视图。

import SwiftUI

struct ContentView: View {
    @State private var message = "Hello, SwiftUI!"

    var body: some View {
        VStack {
            Text(message)
                .padding()
            
            Button(action: {
                message = "You tapped the button!"
            }) {
                Text("Tap me")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(8)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

新增的内容解析

  • @State private var message = "Hello, SwiftUI!"：定义一个状态变量 message，并初始化为 "Hello, SwiftUI!"。SwiftUI 会在该状态变量改变时自动更新视图。
  • VStack：垂直堆叠视图容器，将 Text 和 Button 组件放置在垂直布局中。
  • Button(action:)：创建一个按钮，点击后执行 action 闭包里的代码，将 message 更新为新的文本。
  • .background(Color.blue) 和 .foregroundColor(.white)：设置按钮的背景色为蓝色，文字颜色为白色。

运行预览

在预览区域中，可以看到初始显示的文本为 "Hello, SwiftUI!"。点击按钮后，文本会变为 "You tapped the button!"。

总结

通过这个简单的示例，你学到了：

  • 如何创建一个 SwiftUI 项目
  • 如何使用 Text 和 Button 等基本组件
  • 如何使用 @State 管理视图的状态

这个示例展示了 SwiftUI 的声明式编程风格和简单的状态管理方式，为你接下来学习更复杂的界面提供了良好的基础。

Last Updated::