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上得到一个三级导航文章阅读应用程序，如下图所示：

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上，将会显示为

iPad

8、总结

跨平台实现的实现需要在Multiplatform下创建工程
可以在创建文件时选择不同的平台，来决定是否是多平台共享资源
Mac和iOS可以通过编译器指令#if os(macOS)来判断
iPhone和iPad可以通过尺寸大小来判断

SwiftUI教程（八）实现iPhone、iPad、Mac的文章阅读器应用熟悉SwiftUI的跨平台操作

0、介绍和演示

1、创建一个工程

2、创建数据模型：

3、ArticleView

4、ArticlesListView

5、TabBarView实现iPhone分类

6、SideBarView实现Mac

7、iPad实现

8、总结

你可能感兴趣的:(SwiftUI教程（八）实现iPhone、iPad、Mac的文章阅读器应用熟悉SwiftUI的跨平台操作)