引言
SwiftUI 是 Apple 在 WWDC 2019 推出的全新用户页面框架，它为开发者提供了一种现代的、直观的方式来构建应用界面。SwiftUI 的核心理念是声明式编程，这意味着你可以通过简单的语法，定义界面与状态之间的关系，而不需要手动处理复杂的界面更新逻辑。它深度集成在整个 Apple 生态系统重，适用于 iOS、macOS、watchOS 和 tvOS。
与传统的 UIKit 或 AppKit 相比，SwiftUI 具有更高的开发效率和灵活性，它让开发者能够用更少的代码完成复杂的UI布局，轻松实现动画效果，并能够自动适配多种屏幕尺寸。无论是新手开发者，还是经验丰富的工程师，SwiftUI都是一种能够提高开发速度和质量的强大工具。
本篇博客将重点介绍SwiftUI的基础模版，通过这些模版，我们可以快速上手SwiftUI，理解其基本结构和工作原理。希望本篇博客可以为你提供有价值的启发。
使用SwiftUI创建第一个项目
- 打开xcode在菜单栏中点击 “file” -> “new” -> “Project”。
- 在弹出的页面中选择App。
- 选择interface由“storyboard”改为“SwiftUI”。
模版项目介绍
这样一个基本的单视图应用程序的模版有以下内容：
- PHSwiftUIDemo1App.swift：该文件的主要功能是定义应用程序的入口点和生命周期管理。负责启动应用程序，并在启动时决定哪个视图将作为用户界面显示。
- ContentView.swift：这是我们的最初页面。在以往的项目中这通常是一个ViewController类。
- Assets.xcassets：这是一个资源目录，存储我们在项目中使用的图像资源。
- 一个名为Preview Content的文件夹，包含另外一个资源目录Preview Assets。
而我们真正需要关心的部分事实上是PHSwiftUIDemo1App.swift以及ContentView.swift这两个文件。
我们首先来看一下应用程序的入口文件PHSwiftUIDemo1App.swift
import SwiftUI
@main
struct PHSwiftUIDemo1App: App {var body: some Scene {WindowGroup {ContentView()}}
}
- import SwiftUI：这一行引入了SwiftUI框架，提供了创建用户界面所需的工具和API，等同于以前的import UIKit。
- @main：这是Swift的一个属性，表面PHSwiftUIDemo1App是应用程序的入口点。这个标记告诉编译器，这是启动应用程序时首先执行的代码。
- struct PHSwiftUIDemo1App: App：定义了一个遵循App协议的结构体PHSwiftUIDemo1App。在SwiftUI中，App协议类似于UIKit中的UIApplicationDelegate，它用于管理应用程序的生命周期。
- var body: some Scene：body是App协议中的一个属性，它返回一个Scene。Scene代表应用的用户页面。对于iOS应用来说，最场景的Scene是WindowGroup，它表示一个或多个窗口。
- WindowGroup：WindowGroup是SwiftUI中用于创建应用窗口的容器。在WindowGroup中，可以定义应用程序的主界面。在这个示例中，ContentView是主界面，在应用启动时，会被加载和显示。
- ContentView()：这个部分指定了应用程序启动时要显示的视图。在这里，它是一个ContentView视图。你可以理解为，PHSwiftUIDemo1App启动后，首先显示的界面是ContentView。
接下来我们来打开ContentView.swift，你应该会看到这样的代码：
import SwiftUIstruct ContentView: View {var body: some View {VStack {Image(systemName: "globe").imageScale(.large).foregroundStyle(.tint)Text("Hello, world!")}.padding()}
}#Preview {ContentView()
}
这段代码并不多，但是它包含了很多内容。
- struct ContentView: View：定义了一个结构体并且遵循了View协议。在SwiftUI中，我们想显示的所有内容都需要遵循View，View是SwiftUI中所有用户界面的基础构件。
- var body: some View：这是View协议要求实现的属性，表示视图的内容。它返回的是一些SwiftUI视图的组合。
- VStack：这个在后面的博客中我们会介绍到它，它是SwiftUI中的一种布局容器，它按照垂直方向排列起内部的视图。在这个例子中，VStack包含了一个Image和一个Text，这两个视图会垂直对齐。
- Image(systemName:"globe")：这是一个显示图标的image视图。使用systemName可以从SF Symbols（Apple提供的图标库）中引用系统图标。"globe"是一个地球图标。
- .imageScale(.large)：设置图标的大小比例，这里将图标大小设置为.large，以使其显示较为大的尺寸。
- .foregroundStyle(.tint)：设置图像的前景色样式，这里应用的是.tint，这通常使用系统的默认颜色。
- Text("Hello, world!")：显示一段文本"Hello, world!"，这是SwiftUI中用于展示静态文本的Text视图。
- .padding()：给VStack及其内部的所有子视图添加一定的内边距，使视图的内容与窗口边界保持一定距离。
- 而最后一段落这是用于SwiftUI中快速预览视图的声明。#Preview是一个标记，它允许你在Xcode中即时看见ContentView的渲染效果，无需运行完整的应用程序。这使得开发者能够快速迭代和调整用户界面。
结语
SwiftUI 为我们提供了一种简洁且强大的方式来构建用户界面。在这篇文章中，我们初步了解了 SwiftUI 的模版结构，并快速上手构建了一个简单的应用框架。通过使用声明式语法，我们能够以更少的代码实现更复杂的 UI，显著提高了开发效率。
接下来，我们将更深入地探索 SwiftUI 的各个组件，如 Text 和 Image，这些是构建界面的基础元素。通过更详细的讲解和实际应用，我们将能够更加灵活地使用 SwiftUI 来满足不同的需求，敬请期待！