SwiftUI学习01-基本使用

SwiftUI 是苹果推出的一种现代化方式，用于创建跨所有 Apple 平台的用户界面。它通过声明性语法简化了 UI 的开发流程。下面是一个基本的 SwiftUI 示例，展示了如何使用 SwiftUI 构建一个简单的 "Hello World" 应用。

示例步骤

1. 创建一个新的 SwiftUI 项目

打开 Xcode，选择 "新建项目" 并选择 "App" 模板。在创建项目前，确保使用 "SwiftUI" 作为用户界面，语言选择 "Swift"。

2. 基本的 "Hello World" 示例

创建项目后，Xcode 会生成一个基本的 SwiftUI 文件。以下是如何使用 SwiftUI 实现一个最简单的 "Hello World" 示例：

import SwiftUI

@main
struct HelloWorldApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
            .padding()
            .font(.largeTitle)
            .foregroundColor(.blue)
    }
}

解释代码

• @main:

  @main 是 Swift 应用的入口点。在 SwiftUI 应用中， @main 标记的结构体遵循 App 协议，定义了应用的主界面和行为。

• HelloWorldApp:

  这是应用的主入口，定义了应用启动时创建的场景（窗口）。

• WindowGroup:

  WindowGroup 定义了一个窗口内容。每个 WindowGroup都包含一个 ContentView。

• ContentView:

  这是一个遵循 View 协议的结构体，定义了用户界面。

• Text:

  Text 是一个显示静态文本的视图。你可以附加多个修饰符（例如 padding, font, 和 foregroundColor）来修改文本的外观。

增强示例：带有按钮的示例

我们可以进一步增强这个示例，通过添加一个按钮，实现点击按钮改变文本内容的功能。

import SwiftUI

@main
struct HelloWorldApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

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

    var body: some View {
        VStack {
            Text(message)
                .padding()
                .font(.largeTitle)
                .foregroundColor(.blue)

            Button(action: {
                message = "Button Clicked!"
            }) {
                Text("Click Me")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
    }
}

解释新增的代码

• @State:

  @State 属性包装器用于声明视图中的状态变量。状态变量变化时视图会自动更新。

• VStack:

  VStack 是垂直堆栈视图，安排其子视图垂直排列。

• Button:

  Button 表示一个按钮视图。action 闭包在按钮点击时执行。

通过以上步骤与代码，你就可以实现一个简单的 SwiftUI 视图，并体验 SwiftUI 带来的简洁与高效的开发体验。如果你继续深入学习 SwiftUI，会发现更多丰富的特性和强大功能。