SwiftUI教程系列文章汇总
本文通过创建一个文章阅读器应用，将SwiftUI代码应用到多个平台上，来实现跨平台操作。主要了解如何在不同平台间实现共享资源，以及如何在各自平台使用特定资源。
主要内容：
- 跨平台应用的创建
- TabBarView和SideBarView的使用
- 不同平台的特殊处理
0、介绍和演示
我们在一个平台上编写SwiftUI代码，可以将其扩展到许多平台。 这也是SwiftUI的一个很重要的特点。在本文我们将创建一个iOS应用程序，之后并重用它的一些组件来创建iPad、macOS平台应用。
主要可以查看如何在平台之间共享公共资源，比如模型就可以在各个平台间共享。还可以给每个平台使用自己特定的其他资源，比如视图。
拥有平台特定的视图让我们能够遵循平台特定的设计方式，并改进所提供的用户体验我们的应用程序。
还有其他的比如watchOS，本文不做分析。
本文将创建一个文章阅读器应用，应用在iPhone、iPad、macOS平台。
1、创建一个工程
说明：
- 注意这里是在Multiplatform创建APP的。
- 只有在这里创建才可以实现在Mac和iOS上多平台开发。
2、创建数据模型：
将需要显示的文章内容添加到数据模型中。这个数据模型是共享的，所以要放到Shared文件夹下。
为了工程文件更条理性，创建一个Group文件夹来存储我们的数据模型。因为模型是在所有平台上共享的，所以我们将创建在“Shared”文件夹下。右键点击Shared文件夹，选择“New Group”并命名为Models的文件夹。
在Models文件夹中，创建一个新的Swift文件，命名为Article。在“Target”下，勾选“Cross-Platform(iOS)”，“Cross-Platform(macOS)”，然后选择“创建”。
文件创建时勾选多个平台，该文件就会在多个平台上共享
将下来在Article.swift中，创建一个Article结构体:
import Foundation
struct Article: Identifiable {
var id = UUID()
let title: String
let description:
String let type: String
}
说明：
- 给每一篇文章都创建四个属性，分别为ID，标题、描述、类型
- 标题和描述是文章内容本身
- 类型是将其归类到哪个分类。
- id用来表示文章，用于后面的判断
在结构体下面，创建三个数组，每个数组代表一个虚拟Article实例的数据。当然我们自己可以随便写。
3、ArticleView
在SharedFolder中，创建一个ArticleView来显示一个单独的文章。 同样，在“Targets”下，勾选“Cross-Platform(iOS)”，“Cross-Platform(macOS)”，以此让文件在多个平台共享。
代码：
import SwiftUI
struct ArticleView: View {
let article: Article
var body: some View {
VStack(alignment: .leading, spacing: 5) {
Text(article.title)
.font(.title)
Text(article.description)
.font(.headline)
Spacer()
}.padding()
}
}
说明：
- 文章本身只是用来显示文章的标题和描述的视图
- 这里为了演示仅做简单的展示，在实际开发中可以写更多的视图。
4、ArticlesListView
文章选择列表显示。
接下来，在Shared中，创建一个名为ArticlesListView的SwiftUI视图，该视图可以对文章进行排列。
代码：
import SwiftUI
struct ArticlesListView: View {
let articles: [Article ]
var body: some View {
#if os(macOS)
return view.frame(minWidth: 400, minHeight: 600)
#else
return view
#endif
}
@ViewBuilder
private var view: some View {
List(articles) {article in
NavigationLink(destination: ArticleView(article: article)) {
ArticleView(article: article)
}
}.navigationTitle("\(articles[0].type)")
}
}
说明：
- 在这里，我们通过编译器指令#if os(macOS)。检查应用程序是否编译为Mac设备使用
- 我们的代码正在编译中，构建指令允许我们执行某些检查和自定义逻辑
- 这对于基于不同平台的自定义编译的跨平台代码库非常方便
- 因此通过对不同平台的判断，我们可以对于拥有更大屏幕的Mac应用程序，使用frame方法调整视图画面的大小
- 在显示ArticlesListView时，使用了NavigationLink进行跳转导航。
- 这里的列表显示有多个文章标题，点击后就可以跳转到文章视图界面。
5、TabBarView实现iPhone分类
接下来要对文章进行分类。
我们有三类文章:科技、商业和体育。对于iPhone，我们希望这三个类别是在底部的标签栏中显示为三个不同的标签
，对于iPad和Mac，我们希望这三个类别被列在侧边栏，因此要分别进行处理，对于iPhone就需要使用TabBarView视图进行处理。
在iOS文件夹中，新建一个SwiftUI视图文件TabBarView.swift。注意，这里我们不需要将“Cross-Platform(macOS)”作为Target，因为它只适用于iOS。 是单独为iPhone使用的，是特有资源。
**代码实现如下 **
import SwiftUI
struct TabBarView: View {
var body: some View {
TabView {
ArticlesListView(articles: techArticles)
.tabItem {
Image(systemName: "desktopcomputer")
Text("Tech")
}.tag(0)
ArticlesListView(articles: businessArticles)
.tabItem {
Image(systemName: "dollarsign.circle")
Text("Science")
}.tag(1)
ArticlesListView(articles: sportArticles)
.tabItem {
Image(systemName: "sportscourt")
Text("Design")
}.tag(2)
}.navigationTitle("Articles")
}
}
说明：
- 在TabView内使用之前定义的ArticlesListView
- 每个选项卡都填充之前定义好的Article数组
- 这样在切换三种选项卡的时候，就可以显示对应的文章内容。
- 使用.tabitem修饰符来设置每个标签的图像和文本的样式。
- 图片是使用systemName创建的，它允许我们从内置的SF Symbols图标集wh中加载图片
- 使用tag()来定位它们的制表符顺序。
开始运行
在ContentView中添加代码：
struct ContentView: View {
var body: some View {
NavigationView{
TabBarView()
}
}
}
说明：
- 将TabBarView添加到一个NavigationView中
- 这样可以确保在ArticlesListView可以使用NavigationLink
- 当您导航到不同的标签类别时，该类别的文章就会显示出来
结果：
6、SideBarView实现Mac
侧边栏导航是一个三列导航，提供对顶级集合的快速访问。 需要使用SideBarView来实现。
在macOS文件夹下，创建一个新的SwiftUI视图文件SideBarView.swift。 在创建时，同时选择iOS和Mac版本，虽然iPhone不使用SideBarView，但是我们还需要将这个文件作用于iPad。所以需要在多个平台进行使用。是共享资源。
import SwiftUI
struct SideBarView: View {
@ViewBuilder
var body: some View {
List() {
NavigationLink(
destination: ArticlesListView(articles: techArticles),
label: {
Label("Tech", systemImage: "desktopcomputer")
}
)
NavigationLink(
destination: ArticlesListView(articles: businessArticles) ,
label: { Label("Business", systemImage: "dollarsign.circle")
}
)
NavigationLink(
destination: ArticlesListView(articles: sportArticles),
label: { Label("Sport", systemImage: "sportscourt") }
)
}
.navigationTitle("Articles")
.listStyle(SidebarListStyle())
}
}
- 在实现上使用了iOS 14和macOS Big Sur上新的SideBarListStyle列表样式。
- 其他的点击跳转实现和iPhone上的一样。
- 通过这种新的样式就可以显示出侧边栏使用List列出文章类型的三种类型的效果
- 注意一下listStyle
运行：
在ContentView中，注释掉TabBarView并添加SideBarView:
struct ContentView: View {
var body: some View {
NavigationView{
//TabBarView()
SideBarView()
}
}
}
修改后，在Mac上运行这个应用程序时，就会在Mac上得到一个三级导航文章阅读应用程序，如下图所示：
7、iPad实现
上面我们知道Mac和iPad使用SideBarView来显示，iPhone使用TabBarView来显示。而iPad又属于iOS，所以我们需要在ContentView视图中进行判断这三种情况.
使用#if来检测应用程序在哪个操作系统上运行,同时使用horizontalSizeClass属性来检测设备是iPad还是iPhone。
代码：
import SwiftUI
struct ContentView: View {
#if os(iOS)
@Environment(\.horizontalSizeClass) var horizontalSizeClass:UserInterfaceSizeClass?
#endif
@ViewBuilder
var body: some View {
NavigationView {
#if os(iOS)
if horizontalSizeClass == .compact {
TabBarView()
} else {
SideBarView()
}
#else
SideBarView()
#endif
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
说明：
- 创建一个@Environment对象来存储size类的值。
- 通过检查size类的值是否为"compact"size类来判断shi否为iPad或iPhone。
- 因为iphone的尺寸是“compact”，而ipad的尺寸是“compact”。
- 因此，如果size为compact (iPhone)，我们将显示TabBarView。否则是iPad或Mac，我们显示SideBarView。
如果我们运行在iPad上，将会显示为
8、总结
- 跨平台实现的实现需要在Multiplatform下创建工程
- 可以在创建文件时选择不同的平台，来决定是否是多平台共享资源
- Mac和iOS可以通过编译器指令#if os(macOS)来判断
- iPhone和iPad可以通过尺寸大小来判断