SwiftUI 学习笔记：基础 UI

IOS

2023-11-11 17:28:07

导言

SwiftUI 是 Apple 开发的一种现代化声明式 UI 框架，用于构建 iOS、iPadOS 和 macOS 应用程序。它提供了简洁的语法和强大的功能，让开发者能够轻松创建优雅且高效的用户界面。

创建 SwiftUI 项目

要在 Xcode 中创建一个新的 SwiftUI 项目，请按照以下步骤操作：

启动 Xcode。
单击“创建新 Xcode 项目”按钮。
在“项目模板”类别中，选择“应用程序”。
在“平台”部分，选择“iOS”。
在“应用程序模板”部分，选择“SwiftUI App”。
填写项目详细信息，然后单击“创建”。

VStack 和 HStack

VStack 和 HStack 是 SwiftUI 中用于创建布局的基本元素。VStack 将子视图垂直堆叠，而 HStack 将子视图水平排列。

以下是如何使用代码创建一个 VStack：

VStack {
    // 子视图...
}

以下是如何使用代码创建一个 HStack：

HStack {
    // 子视图...
}

创建交互式 UI

SwiftUI 提供了多种方法来创建交互式用户界面，例如按钮、文本字段和开关。

以下是如何使用代码创建一个按钮：

Button("按钮") {
    // 动作...
}

以下是如何使用代码创建一个文本字段：

TextField("文本字段", text: $text)

SwiftUI 中的约束

约束用于定义视图之间的空间关系。SwiftUI 提供了多种方法来设置约束，例如使用 VStack 和 HStack 的 spacing 属性。

以下是如何使用代码设置控件之间的间距：

VStack {
    Text("控件 1")
    Text("控件 2")
}
.spacing(20) // 设置控件之间的间距为 20 磅

示例项目

下面是一个简单的 SwiftUI 项目示例，演示了如何使用 VStack、HStack 和交互式 UI 元素：

import SwiftUI

struct ContentView: View {
    @State var text = ""

    var body: some View {
        VStack {
            HStack {
                Text("欢迎来到 SwiftUI！")
                Button("提交") {
                    // 动作...
                }
            }

            TextField("输入您的姓名", text: $text)
        }
        .padding()
    }
}