[SwiftUI練級-1] 餐費計算器 · part1

更多內(nèi)容歡迎關(guān)注公眾號：BoBo清吧

SwiftUI是一個為iOS汇恤，macOS六剥，tvOS，乃至watchOS構(gòu)建交互式應用的強大框架辆童。當然恰起，在學習它之前，你需要先熟悉Swift語言本身：這是一門強大而且靈活的現(xiàn)代編程語言颁褂。

如果你對Swift語言還不是很了解故响，可以移步閱讀我的《極速Swift》系列文章，對Swift語言來一個速覽颁独。

如果你已經(jīng)熟悉Swift語言彩届，那就讓我們即刻開始項目實踐吧。

AA餐費計算器(WeSplit) - 介紹

這是一個演示項目誓酒，構(gòu)建的app是去飯店吃飯后可以用到的AA餐費計算器惨缆。你輸入餐費，選擇要留的小費比例丰捷，用餐人數(shù)坯墨，app會告訴你每個人需要付的費用。

項目非常簡單病往，目的是教你一些SwiftUI的基礎(chǔ)知識捣染。

你將了解到UI設(shè)計的基礎(chǔ)，如何讓用戶輸入數(shù)值停巷，如何從選項中選取耍攘，以及如何跟蹤程序狀態(tài)。由于是第一個項目畔勤，我會放慢節(jié)奏蕾各，解釋清每一個概念。

項目被分為三個階段：

介紹你將用到的各種技術(shù)

手把手的項目構(gòu)建導引

需要你自行完成的挑戰(zhàn)

每個階段都很重要庆揪，因此不要著急推進式曲。

第一步，我將介紹獨立的組件，以便你理解它們每一個是如何工作的吝羞。代碼會有不少兰伤，包括我的解釋性描述。這個步驟會放在概覽中： 關(guān)于是什么钧排，怎么工作敦腔，以及如何使用。

第二步恨溜，把學習到的組件應用于實踐符衔。你將得到更多的上下文，為什么我們要用它們糟袁，它們是如何與其他組件配合的判族。

最后一步我們將總結(jié)學到的知識。

長話短說系吭，讓我們開始吧五嫂。

啟動Xcode颗品，選擇創(chuàng)建一個新的Xcode項目肯尺，你會面對一組選項，請選擇iOS和Single View App躯枢，然后點擊下一步则吟，在下一屏的向?qū)гO(shè)置中，你需要這么做：

Product Name 輸入 “WeSplit”

Organization Identifier 輸入任何你想要的反向域名的字符串

Language 選擇 Swift

User Interface 選擇 SwiftUI

確保底部所有的checkbox沒有勾選锄蹂。

一切準備好后氓仲，點擊Next，然后選擇你想要存儲項目的位置得糜，最后點擊Create敬扛。Xcode將為你創(chuàng)建好工程，并且打開編輯器朝抖。

稍后我們將基于這個工程構(gòu)建我們的AA餐費計算器啥箭，不過目前為止我們只需要把這個工程當成試驗代碼的沙盒環(huán)境就好。

動手完成吧治宣！

了解一個SwiftUI應用的基本結(jié)構(gòu)

當你創(chuàng)建一個SwiftUI應用時急侥，你將得到一組總計100行左右代碼的文件。大部分代碼其實什么事也沒做侮邀，只是占位符而已坏怪，你可以先忽略它們。隨著教程推進绊茧，這些占位符的代碼將會被修改铝宵。

在Xcode中，你會在左邊的空間看到這些文件华畏，這個空間被稱為project navigator：

AppDelegate.swift 包含管理app的代碼捉超。過去經(jīng)常需要在這里添加代碼胧卤，不過現(xiàn)在已經(jīng)很少了。

SceneDelegate.swift 包含啟動app窗口的代碼拼岳。在iPhone上這個類做的事情不多枝誊，但是在iPad上，可能同一時間有幾個app打開惜纸，因此這個類很重要叶撒。

ContentView.swift 包含程序UI的初始化代碼，也是我們這個項目中所有邏輯書寫的地方耐版。

Assets.xcassets 是一個asset catalog祠够，app中所有圖片資源的集合。除了app圖標粪牲， iMessage貼紙古瓤，你還可以在這里添加顏色。

LaunchScreen.storyboard 是一個創(chuàng)建小塊UI的視覺編輯器腺阳，這些UI會在app啟動時展示落君。

Info.plist 是一個特殊值的集合。這些值向系統(tǒng)描述你的app如何工作亭引，包括它的版本绎速，支持的設(shè)備方向，等等焙蚓。這些雖然不是代碼纹冤，但也十分重要。

Preview Content 是一個黃色的組购公，內(nèi)部有 Assets.xcassets萌京，這是另一個asset catalog，向你展示程序運行時是長什么樣宏浩。

由于項目中所有的邏輯都位于ContentView知残，Xcode已經(jīng)為你打開了這個文件。文件頭部有一些注釋绘闷，你也可以在這里添加你自己的說明橡庞。

注釋之后是10多行的代碼：

import SwiftUI

struct ContentView: View {

? ? var body: some View {

? ? ? ? Text("Hello World")

? ? }

}

struct ContentView_Previews: PreviewProvider {

? ? static var previews: some View {

? ? ? ? ContentView()

? ? }

}

在開始寫我們自己的代碼之前，值得了解一下這些代碼都是做什么用的印蔗。

首先扒最，import SwiftUI 告訴 Swift 我們將使用 SwiftUI 框架提供給我們的全部功能。Apple 為我們提供了許多框架华嘹，諸如機器學習吧趣，音頻播放，圖像處理等等。相比假定我們將用到所有的功能强挫，我們需要告知 Swift 我們要用到哪些部分岔霸，以便提前加載。

其次俯渤，struct ContentView: View 創(chuàng)建了一個新的名叫 ContentView 的結(jié)構(gòu)體呆细，這個結(jié)構(gòu)體遵循 View 協(xié)議。View 來自 SwiftUI八匠，并且是所有需要被繪制到屏幕的元素都必須適配的基礎(chǔ)協(xié)議絮爷，包括所有的文字，按鈕梨树，圖像以及其他視圖坑夯。

第三，var body: some View 定義了一個新的計算屬性抡四，名叫 body柜蜈，它有一個很有趣的類型：some View，這代表著一個遵循 View 協(xié)議的類型指巡，但這個額外的 some 關(guān)鍵字同時也添加了一個重要約束： 你必須總是返回相同的類型淑履，不能一會返回一個類型，一會又返回另一個不同的類型厌处。

稍晚些我們會介紹這個特性鳖谈，不過現(xiàn)在只需要理解它代表“這個屬性必須返回某個特定類型的view”岁疼。

View 協(xié)議只有一個要求阔涉，你必須實現(xiàn)一個叫 body 的計算屬性，返回 some View捷绒。當然瑰排，你可以添加更多的屬性和方法，但 body 是唯一必須實現(xiàn)的暖侨。

第四椭住，Text("Hello World") 創(chuàng)建了一個用字符串“Hello World”構(gòu)造的文本視圖。文本視圖是簡單的靜態(tài)文本字逗，必要時會自動對多行文本進行折行京郑。

在 ContentView 結(jié)構(gòu)體的下面，你會看到一個 ContentView_Previews 的結(jié)構(gòu)體葫掉，它遵循的是 PreviewProvider 協(xié)議些举。這部分代碼并不會成為你的最終app的一部分，它是專供Xcode用來預覽你的視圖的代碼俭厚。

這些預覽用到了一個叫canvas的XCode特性户魏，通常直接在你代碼的右側(cè)可視化呈現(xiàn)。你還可以定制這個canvas的展示方式。

Xcode只能在macOS Catalina或者之后的版本上展示叼丑。

提示： 你會經(jīng)常發(fā)現(xiàn)关翎，你代碼中的錯誤會導致canvas的預覽停止，你會遇到“Automatic preview updating paused”鸠信，你可以點擊Resume修復它纵寝。如果頻繁使用，建議記下快捷鍵：Option+Cmd+P星立。

其他知識碎片

在開始項目之前店雅，你還需要學習以下幾塊知識碎片。

創(chuàng)建Form

增加導航欄

修改程序碎片

綁定狀態(tài)到UI控件

利用循環(huán)創(chuàng)建視圖

完成之后贞铣，讓我們回到這里闹啦，繼續(xù)我們的項目實踐。