【干货】如何在 3 分钟内使用 SwiftUI 开发一个新闻资讯 app

原创： 彭权华
首发：「知晓云」公众号 - 小程序开发快人一步

SwiftUI 是苹果最新推出的 UI 开发工具，其具备如下特色：采用声明式语法，易于阅读、代码更少；跨全部苹果平台，共用一套 API；自动支持动态类型、暗黑模式、本地化等。采用 SwiftUI 将大大提升 UI 界面开发效率。

你们好，我是小彭。苹果近期推出了一个全新的 SwiftUI 框架，能够极大地提升 iOS 上 UI 界面的开发效率。今天小彭就用 SwiftUI 来实现一个新闻资讯 app，看看能有多快。

【关注「知晓云」公众号，回复关键字「SwiftUI」获取完整代码】

受篇幅所限，咱们将经过上下两篇文章为你们介绍如何实现一个完整的新闻资讯 app，本篇主要内容有：

• SwiftUI 的基础知识：预览、View 协议、修饰器、@State 特性等。

• 使用 NavigationView、NavigationLink、List、Text、Image 等基本视图和 HStack、VStack 经常使用的布局方式建立资讯列表页、资讯详情页并显示从 daliy.plist 文件读取的新闻信息。

开始

在 Xcode 11，建立一个新项目，选择 iOS->Single View APP，命名为 Daily，并选中 Use SwiftUI。

ScenDelegate

SwiftUI 项目新增了一个 ScenDelegate.swift 文件，AppDelegate 和 ScenDelegate 共同用于管理 app 的生命周期。ScenDelegate 的 scene(_:willConnectTo:options:) 进行 UI 配置：

预览（Preview）

打开 ContentView.swift 文件，右上角有一个 Resume 按钮，若是没有看见 Resume 按钮，选择 Editor > Canvas。

点击 Resume 对 ContentView 视图进行预览

要支持预览视图，须要实现 PreviewProvider 协议，并在协议属性内返回该视图实例，好比为 ContentView 提供预览：

以往写一个页面，若是这个页面藏得很深，那么你运行后进入到这个页面须要耗费很长时间。如今不须要运行，经过预览能够立刻看到页面效果，节省了页面开发时间。

注意：必须 macOS 10.15 以上系统才支持预览功能！

View 协议和修饰器

ContentView 实现了 View 协议。全部视图都须要实现 View 协议，在协议属性 body 内提供视图内容和布局。

Text 也是一个 View。注意：自定义视图的 body 最多建立 10 个子视图。

经过修饰器（modifier）来配置视图，好比将 Text 的文字设置为红色，字体为 system，大小为 16，那么能够经过 foregroundColor、font 修饰器来配置：

每一个修饰器都会返回新的视图 View，经过多个修饰器造成一个修饰链来完成对适配的配置。须要注意的是，修饰器的顺序不一样可能产生不同的结果。

数据准备

每一条新闻资讯包含标题、做者、发布日期、详细内容、图片等信息。建立一个 swift 文件，命名为 News.swift。在该文件内建立一个新闻模型 News：

为了简单起见，预约义了 2 条新闻资讯信息。fetchDaliy() 方法获取新闻信息并返回 News 数组：

UI 构建

App 的主要内容有：新闻列表页、新闻详情页。咱们将全部新闻资讯展现在一个列表上，每一行表明一条新闻，点击一行进入到资讯详情页。相应地，须要三个页面：列表页、列表项、详情页。新建三个 SwiftUI 文件，分别命名为 NewsListView.swift、NewsListRow.swift、NewsDetailView.swift 。NewListView 表示列表页，NewsListRow 表示列表项，NewsDetailView 表示详情页。

页面导航

在列表页点击一条新闻，将跳转到详情页，同时详情页也可以返回到列表页。在 SwiftUI 中，使用 NavigationView 和 NavigationLink 来实现页面之间的导航跳转。将列表页 NewsListView 嵌入到 NavigationView 中，SwiftUI 会在 NewsListView 顶部增长一个导航栏 NavigationBar。打开 ContentView.swift 文件，增长如下代码：

navigationViewStyle 指定导航类型，若未指定，在 iPhone 和 iPad 默认的导航类型不同。

新闻列表页

在 NewsListView 中，咱们须要获取全部新闻资讯数据，并展现在一个列表上。

经过 List 声明一个列表，并指定数据源和每一行的内容。

NavigationLink 经过指定目标页面，实现页面之间的跳转。

另外须要注意的是，List 的初始化方法指定了数据源，数据源的元素须要实现 Identifiable，所以咱们在 News 类型实现了 Identifiable。

新闻列表项

每个列表项显示一条新闻，内容包含图片、标题、发布日期。布局以下图:

在 SwiftUI 中，使用 HStack 和 VStack 来组合不一样的使用的视图。HStack 表示横向关系，VStack 表示纵向关系。标题和日期是纵向关系，而标题和日期组合起来和图片是横向关系。NewListRow 的实现以下面代码：

咱们须要实现 WebImageView 获取网络图片并显示，图片未下载时显示一个占位图片，当图片下载后将显示该网络图片：

Image 是 SwiftUI 的图片控件，uiImage 为 nil 时，Image 视图显示 placeholderImage 占位图。当 WebImageView 出现时(onAppear)，将会根据 imageUrl 下载图片，下载完成后将 image 赋值给 uiImage，此时 SwiftUI 会自动更新 Image 的图片。Image 可以自动更新，是由于将 uiImage 声明了 @State 特性。将 View 的存储属性声明为 @State 后，每当该属性的值发生变化时，SwiftUI 都会从新绘制 body 的内容。

新闻详情页

在新闻详情页，咱们须要显示标题、做者、发布日期、详细内容。布局如图：

代码以下所示

经过 navigationBarTitle 来设置详情的导航标题，以及展现模式。padding 设置视图间的间隔。

小结

以上虽然解决了 UI 构建的问题，但实际应用中，数据都是动态变化的，因此咱们须要与后端服务器进行交互。下一篇文章小彭将继续为你们介绍 SwiftUI 的 ObservableObject、@ObservedObject、@Published 等特性。以及如何从服务器获取数据，实现新闻咨询的动态更新。

关注「 知晓云」公众号，点击菜单栏「知晓云」-「知晓课堂」，获取更多开发教程。

公众号回复「交流」，便可加入小程序开发大佬交流群。