SwiftUI教程系列文章彙總

本文通過實現閒魚首頁，對之前所掌握的Swift檢視和佈局技術都進行一遍操練，以此加深印象。

效果演示：

實現功能

1. 啟動頁
2. 頁面切換
3. 主介面顯示

分析

1. 整體上共分成五個頁面：“閒魚”、“會玩”、“釋出”、“訊息”、”我的“。
2. ”閒魚“頁面分成三部分：標題欄、搜尋欄、主內容介面
3. ”閒魚“介面可以有”關注“、”推薦“、”本地“三種介面。

1、 介面整體佈局

說明： 1. 整體上分為五個檢視 2. 這裡僅對”閒魚“檢視進行了詳細設計，其他四個檢視只起到佔位效果 3. VStack{}就說明內容為空 4. 通過tabItem的設定給每一項設定了顯示 5. 釋出檢視只設置了圖示 6. 通過selectedTab判斷選中的是哪一項，來決定是否高亮 7. 因為涉及到了分頁，所以使用TabView來設定，

2、 閒魚介面佈局

說明： 1. 整體佈局為垂直佈局，所以使用VStack。 2. 標題為水平佈局，使用HStack 3. 搜尋為水平佈局，使用HStack 4. 內容可以分為關注、推薦、本地，所以使用TabView來設定，設定每一項。檢視分別為attentionView、recommendView、localityView。 5. 這裡還需要注意tabViewStyle的設定，PageTabViewStyle表示分頁，indexDisplayMode設定不顯示小白點

3、 標題

說明： 1. 建立圖片有可能會失敗，所以是可選項 2. Spacer可以看做是一個空檢視 3. 通過ForEach顯示多個Tab切換按鈕，動態新增每一項 4. 使用預設動畫，點選後拿到當前按鈕的tabSwitch 5. 對按鈕樣式進行設定，選中的tabSwitch如果就是當前的i,那麼就高亮顯示。否則灰顯

4、 搜尋框

說明： 1. 可以分為兩部分：搜尋框、分類圖示 2. 將搜尋框整體作為一個圖示來顯示 3. 搜尋框又包含了掃描按鈕、豎線、輸入框、搜尋文字 4. 豎線通過文字檢視Text來設定，文字為空，僅設定背景色 5. 通過Text設定佔位文字。為了演示這裡使用了Text，實際上應該使用TextField 6. 檢視搜尋文字檢視的設定： 1. foregroundColor:文字顏色 2. opacity：透明度 3. background：背景顏色。 4. cornerRadius：邊框圓角 5. padding：內邊距 7. 通過overlay給搜尋框覆蓋一個邊框。cornerRadius設定圓角

5、 attentionView

分為兩部分：常訪問的人、檢視寶貝

5.1 常訪問的人

說明： 1. 常訪問的人使用HStack進行水平佈局 2. 人員資訊檢視需要水平滾動，所以使用ScrollView，並且設定為.horizonta 3. 每個檢視都進行垂直佈局，分別為圖示和文字。 4. lineLimit設定最大行數為1，如果超出檢視大小，則顯示為...

5.2 檢視寶貝

說明： 1. 檢視需要滾動顯示，所以使用ScrollView 2. 使用ForEach動態新增多個檢視 3. 每個寶貝檢視包含三部分：1.使用者資訊；2. 寶貝描述；3. 寶貝圖片 4. 字典獲取的是可選項 5. 使用overlay覆蓋描述資訊

6、 recommendView

6.1 品牌選擇

說明： 1. 水平設定閒魚優品的圖片，使用HStack 2. 依然通過HStack + ForEach 水平佈局多個檢視，每個檢視都顯示圖片+文字

說明： 1. 通過Grid設定表格 2. 在columns中設定每列，可以對每列進行設定，這裡都設定為.flexible() 3. 依然通過ForEach設定每個表格內的資訊

6.2 型別選擇

說明： 1. 很明顯需要水平佈局，而且可以滾動 2. 這裡的weirdAlignment是自定義對齊方式。是水平對齊 3. 如果在不同的場景下會有多種不同樣式的顯示，可以使用Group進行包裝 4. 沒有選中，設定為按鈕，並且使用預設動畫來更改

6.3 寶貝選擇

說明： 1. 使用ScrollView可以讓檢視整體上下滾動 2. 每個元素使用表格來顯示，設定為兩列 3. 每個元素都分為四部分：1. 寶貝圖片；2. 寶貝描述；3. 價錢和想要；4. 使用者資訊 4. 通過設定offset進行相對佈局

7、 localityView

說明： 1. 分為三部分：1. 查詢選項；2. 出租資訊；3. 詳細顯示 2. 所涉及檢視和佈局前文都已說明，這裡便不再贅述了

8、啟動頁

在Assets中建立啟動圖片和啟動顏色，分別為launch和launchColor

進入到Target -> Info，進行如下設定

啟動效果：