SwiftUI教程系列文章匯總

本文通過(guò)實(shí)現(xiàn)閑魚(yú)首頁(yè)，對(duì)之前所掌握的Swift視圖和布局技術(shù)都進(jìn)行一遍操練，以此加深印象。

效果演示：

[圖片上傳失敗...(image-298b9f-1658462671077)]

實(shí)現(xiàn)功能

1. 啟動(dòng)頁(yè)
2. 頁(yè)面切換
3. 主界面顯示

分析

1. 整體上共分成五個(gè)頁(yè)面：“閑魚(yú)”、“會(huì)玩”、“發(fā)布”、“消息”、”我的“。
2. ”閑魚(yú)“頁(yè)面分成三部分：標(biāo)題欄、搜索欄、主內(nèi)容界面
3. ”閑魚(yú)“界面可以有”關(guān)注“、”推薦“、”本地“三種界面。

1、 界面整體布局

界面整體布局

說(shuō)明：

1. 整體上分為五個(gè)視圖
2. 這里僅對(duì)”閑魚(yú)“視圖進(jìn)行了詳細(xì)設(shè)計(jì)，其他四個(gè)視圖只起到占位效果
3. VStack{}就說(shuō)明內(nèi)容為空
4. 通過(guò)tabItem的設(shè)置給每一項(xiàng)設(shè)置了顯示
5. 發(fā)布視圖只設(shè)置了圖標(biāo)
6. 通過(guò)selectedTab判斷選中的是哪一項(xiàng)，來(lái)決定是否高亮
7. 因?yàn)樯婕暗搅朔猪?yè)，所以使用TabView來(lái)設(shè)置，

2、 閑魚(yú)界面布局

閑魚(yú)界面布局

說(shuō)明：

1. 整體布局為垂直布局，所以使用VStack。
2. 標(biāo)題為水平布局，使用HStack
3. 搜索為水平布局，使用HStack
4. 內(nèi)容可以分為關(guān)注、推薦、本地，所以使用TabView來(lái)設(shè)置，設(shè)置每一項(xiàng)。視圖分別為attentionView、recommendView、localityView。
5. 這里還需要注意tabViewStyle的設(shè)置，PageTabViewStyle表示分頁(yè)，indexDisplayMode設(shè)置不顯示小白點(diǎn)

3、 標(biāo)題

標(biāo)題

說(shuō)明：

1. 創(chuàng)建圖片有可能會(huì)失敗，所以是可選項(xiàng)
2. Spacer可以看做是一個(gè)空視圖
3. 通過(guò)ForEach顯示多個(gè)Tab切換按鈕，動(dòng)態(tài)添加每一項(xiàng)
4. 使用默認(rèn)動(dòng)畫(huà)，點(diǎn)擊后拿到當(dāng)前按鈕的tabSwitch
5. 對(duì)按鈕樣式進(jìn)行設(shè)置，選中的tabSwitch如果就是當(dāng)前的i,那么就高亮顯示。否則灰顯

4、 搜索框

搜索框

說(shuō)明：

1. 可以分為兩部分：搜索框、分類(lèi)圖標(biāo)
2. 將搜索框整體作為一個(gè)圖標(biāo)來(lái)顯示
3. 搜索框又包含了掃描按鈕、豎線、輸入框、搜索文本
4. 豎線通過(guò)文本視圖Text來(lái)設(shè)置，文本為空，僅設(shè)置背景色
5. 通過(guò)Text設(shè)置占位文字。為了演示這里使用了Text，實(shí)際上應(yīng)該使用TextField
6. 查看搜索文本視圖的設(shè)置：
   1. foregroundColor:文本顏色
   2. opacity：透明度
   3. background：背景顏色。
   4. cornerRadius：邊框圓角
   5. padding：內(nèi)邊距
7. 通過(guò)overlay給搜索框覆蓋一個(gè)邊框。cornerRadius設(shè)置圓角

5、 attentionView

分為兩部分：常訪問(wèn)的人、查看寶貝

5.1 常訪問(wèn)的人

常訪問(wèn)的人

說(shuō)明：

1. 常訪問(wèn)的人使用HStack進(jìn)行水平布局
2. 人員信息視圖需要水平滾動(dòng)，所以使用ScrollView，并且設(shè)置為.horizonta
3. 每個(gè)視圖都進(jìn)行垂直布局，分別為圖標(biāo)和文本。
4. lineLimit設(shè)置最大行數(shù)為1，如果超出視圖大小，則顯示為...

5.2 查看寶貝

查看寶貝

說(shuō)明：

1. 視圖需要滾動(dòng)顯示，所以使用ScrollView
2. 使用ForEach動(dòng)態(tài)添加多個(gè)視圖
3. 每個(gè)寶貝視圖包含三部分：1.用戶(hù)信息；2. 寶貝描述；3. 寶貝圖片
4. 字典獲取的是可選項(xiàng)
5. 使用overlay覆蓋描述信息

6、 recommendView

6.1 品牌選擇

品牌選擇

說(shuō)明：

1. 水平設(shè)置閑魚(yú)優(yōu)品的圖片，使用HStack
2. 依然通過(guò)HStack + ForEach 水平布局多個(gè)視圖，每個(gè)視圖都顯示圖片+文本

Grid

說(shuō)明：

1. 通過(guò)Grid設(shè)置表格
2. 在columns中設(shè)置每列，可以對(duì)每列進(jìn)行設(shè)置，這里都設(shè)置為.flexible()
3. 依然通過(guò)ForEach設(shè)置每個(gè)表格內(nèi)的信息

6.2 類(lèi)型選擇

類(lèi)型選擇

說(shuō)明：

1. 很明顯需要水平布局，而且可以滾動(dòng)
2. 這里的weirdAlignment是自定義對(duì)齊方式。是水平對(duì)齊
3. 如果在不同的場(chǎng)景下會(huì)有多種不同樣式的顯示，可以使用Group進(jìn)行包裝
4. 沒(méi)有選中，設(shè)置為按鈕，并且使用默認(rèn)動(dòng)畫(huà)來(lái)更改

6.3 寶貝選擇

寶貝選擇

說(shuō)明：

1. 使用ScrollView可以讓視圖整體上下滾動(dòng)
2. 每個(gè)元素使用表格來(lái)顯示，設(shè)置為兩列
3. 每個(gè)元素都分為四部分：1. 寶貝圖片；2. 寶貝描述；3. 價(jià)錢(qián)和想要；4. 用戶(hù)信息
4. 通過(guò)設(shè)置offset進(jìn)行相對(duì)布局

7、 localityView

localityView

說(shuō)明：

1. 分為三部分：1. 查找選項(xiàng)；2. 出租信息；3. 詳細(xì)顯示
2. 所涉及視圖和布局前文都已說(shuō)明，這里便不再贅述了

8、啟動(dòng)頁(yè)

在Assets中創(chuàng)建啟動(dòng)圖片和啟動(dòng)顏色，分別為launch和launchColor

進(jìn)入到Target -> Info，進(jìn)行如下設(shè)置

設(shè)置

啟動(dòng)效果：

啟動(dòng)效果