【干货】仅需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 配置：

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
   
    let contentView = ContentView()
    if let windowScene = scene as? UIWindowScene {
   
        let window = UIWindow(windowScene: windowScene)
        window.rootViewController = UIHostingController(rootView: contentView)
        self.window = window
        window.makeKeyAndVisible()
    }
} 

预览（Preview）

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

点击 Resume 对 ContentView 视图进行预览

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

struct ContentView_Previews: PreviewProvider {
   
    static var previews: some View {
   
        ContentView()
    }
}

以往写一个页面，如果这个页面藏得很深，那么你运行后进入到这个页面需要耗费很长时间。现在不需要运行，通过预览可以马上看到页面效果，节省了页面开发时间。

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

View 协议和修饰器

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

struct ContentView: View {
   
    var body: some View {
   
        Text("Hello World")        
    }
}

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

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

Text("Hello World")<