原創： 彭權華
首發：「知曉雲」公衆號 - 讓你的小程序開發快人一步
SwiftUI 是蘋果最新推出的 UI 開發工具，其具有以下特點：採用聲明式語法，易於閱讀、代碼更少；跨所有蘋果平臺，共用一套
API；自動支持動態類型、暗黑模式、本地化等。採用 SwiftUI 將大大提高 UI 界面開發效率。
在上篇文章 《僅需3 分鐘，使用 SwiftUI 開發一個新聞資訊 app（上）》中我們已經學到了如何使用 SwiftUI 快速構建一個新聞資訊 app 頁面。但其只是一個靜態頁面，不能滿足我們隨時需要更新資訊的需求。所以本篇小彭將爲大家介紹如何使用知曉雲動態發佈新聞資訊，並在 app 獲取到新聞資訊信息後，使用 SwiftUI 的 ObservableObject、@ObservedObject、@Published 等特性自動更新界面。
【關注「知曉雲」公衆號，回覆關鍵字**「SwiftUI」**獲取完整代碼】
知曉雲
實現實時發佈信息的傳統方式，需要搭建服務器、數據庫，域名備案，數據接口實現等繁瑣流程。使用知曉雲能夠免去這些步驟，使我們專注於業務邏輯的實現。我們只需要在知曉雲創建一個應用和數據表，將數據存儲到數據表中，在 app 能夠方便快捷地操作這些數據。我們將使用知曉雲來存儲新聞資訊信息。
創建應用
前往知曉雲註冊知曉雲賬號。成功註冊後，進入知曉雲控制檯 dashboard 頁。創建應用，應用名稱爲 Daliy，套餐選擇免費版。
創建數據表
選擇左邊側欄數據模塊，彈出創建數據表頁面，數據表名稱爲 Daliy，設置數據表錄入權限爲 登錄用戶；設置行的默認讀寫權限爲 所有人可讀、登錄用戶可寫。
爲 Daliy 添加列，選擇 添加列 ，在彈出頁面輸入 title 即可。
依次添加 author、date、content、thumbnail 列，類型爲 string。
錄入新聞資訊信息，選擇 添加行，在彈出的界面錄入信息：
MinCloud 安裝與配置
App 獲取知曉雲上的信息，需要安裝知曉雲 SDK —— MinCloud。通過 Cocoapods 方便快捷安裝 MinCloud，在 Daliy 項目根目錄下，新建 Podfile 文件，並輸入以下內容：
platform :ios, '9.0'
use_frameworks!
target 'MinCloud' do
pod 'MinCloud', :git => 'https://github.com/ifanrx/hydrogen-ios-sdk.git'
end
在終端進入項目根目錄，並執行以下命令，完成安裝：
pod install
初始化 MinCloud
在應用啓動時，需要註冊知曉雲分配的 clientId，即在 AppDelegate.swift 文件中，導入 MinCloud，並找到 application:didFinishLaunchingWithOptions 方法，插入下面代碼：
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
BaaS.register(clientID: "fdc4feb5403a985fe681")
return true
}
將 clientID 替換成你的應用 ID，clientID 可在 dashboard 設置-應用頁中獲取）。
從知曉雲獲取新聞資訊信息
創建一個 swift 文件，命名爲 DaliyStore。在 MinCloud 中，Table 對應於知曉雲的數據表，操作該對象相當於操作知曉雲對應的數據表。在 DaliyStore.swift 文件，導入 MinCloud，並創建 DaliyStore 類。在 DaliyStore 類增加一個屬性 daliyTable 。daliyTable 是一個 Table 實例，關聯數據表 Daliy。
let daliyTable = Table(name: "Daliy")
新增一個屬性 newList，爲 News 數組，用於保存新聞資訊信息。
@Published var newsList: [News] = []
接下來我們可以通過 daliyTable 來操作數據表。實現 DaliyStore 類的方法 fetchDaliy()，該方法從知曉雲數據表 Daliy 請求新聞資訊信息，並保存到 newsList 中。具體實現如下：
import Foundation
import MinCloud
final class DaliyStore: ObservableObject {
let daliyTable = Table(name: "Daliy")
@Published var newsList: [News] = []
func fetchDalily() {
daliyTable.find { (recordList, error) in
var _newsList: [News] = []
recordList?.records?.forEach({ (record) in
let id = record.Id
let title = record.get(key: "title") as? String
let author = record.get(key: "author") as? String
let date = record.get(key: "date") as? String
let content = record.get(key: "content") as? String
let thumbnail = record.get(key: "thumbnail") as? String
if let id = id, let title = title, let author = author, let date = date, let content = content, let thumbnail = thumbnail {
let news = News(id: id, title: title, author: author, date: date, content: content, thumbnail: thumbnail)
_newsList.append(news)
}
})
DispatchQueue.main.async {
self.newsList = _newsList
}
}
}
}
返回 NewsListView.swift 文件，之前新聞資訊是從 daliy.plist 文件獲取，現在改爲從知曉雲獲取。在 NewListView 類中刪除屬性 newList，新增 store 屬性，類型爲 DaliyStore。List 的數據源改爲 store.newsList。在 List 出現時（onAppear）調用 store 的 fetchDaliy() 方法獲取新聞資訊信息。
struct NewsListView: View {
@ObservedObject var store = DaliyStore()
var body: some View {
List(store.newsList) { (news) in
NavigationLink(destination: NewsDetailView(news: news)) {
NewsListRow(news: news)
Text("Hello World")
.foregroundColor(.red)
.font(.system(size: 16))
}
}
.onAppear(perform: { self.store.fetchDalily() })
.navigationBarTitle("新聞資訊")
}
}
運行代碼，我們可以看到首頁顯示了從知曉雲獲取的新聞信息。你可能覺得奇怪的是，當從知曉雲獲取到新聞信息後，並沒有手動調用代碼去更新頁面，爲什麼能顯示這些信息呢？這就是 ObseverableObject、@ObservedObject、@Published 起的作用。當 @ObservedObject 對象的 @Published 屬性發生改變時，@ObservedObject 所在的視圖也會自動更新 body。另外，@ObservedObject 對象必須實現 ObserverableObject 協議。
小結
通過本教程學習了 SwiftUI 的基礎知識包括：View 協議、修飾器（modifier）、預覽、數據流（@State、ObservableObject、@ObservedObject、@Published）、基本視圖等，並且使用 SwiftUI 創建了新聞資訊列表頁和詳情頁，實現數據和視圖的交互。另外我們也學習瞭如何使用知曉雲（MinCloud）存儲數據，爲 app 提供數據。想了解更多 SwiftUI 信息，可參考這裏；想了解更多知曉雲，可參考這裏。
【關注「知曉雲」公衆號，點擊菜單欄「知曉雲」-「知曉課堂」，獲取更多開發教程。】
