【乾貨】如何在 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 等特性。以及如何從服務器獲取數據，實現新聞諮詢的動態更新。

關注「 知曉雲」公衆號，點擊菜單欄「知曉雲」-「知曉課堂」，獲取更多開發教程。

公衆號回覆「交流」，便可加入小程序開發大佬交流羣。