Swift Practice # 163 Relational Picker in SwiftUI 關聯式Picker

Dogpa Chen
Jul 5, 2022

--

上一篇透過客製化的TabView來完成自定義的TabView,也看到實現TabView不一樣的方式。

這篇則要來研究side project的一個小功能,就是關聯式Picker(自己定義的名詞)。而所謂的關聯式Picker就是在不同的Picker中,第二個Picker的內容會因第一個Picker有所不同,最簡單的解釋就是縣市與行政區,會因為縣市有所不同而改變行政區的選項。而這個部分其實在UIKit有曾經實作過。

但這篇則是想要透過SwiftUI來實踐,網路上的資源多半是獨立的Picker來一起顯示,沒有看到我所認為的關聯式Picker。所以這篇就嘗試自己來處理看看。

首先一樣先透過過往的資源取得台灣行政區的JSON檔案加入到專案中

接著開始寫程式碼

Model:

跟Swift Practice # 86一樣先建立解析JSON的格式,順便把解析JSON的Function放在這裡。

ViewModel:

CityDistrictViewModel

原本上述的ViewModel已經處理好相關的邏輯,剛好跟同事探討這個小功能,同事提出了透過字典來查找指定行政區的方式,所以又再另外建立一個ViewModel當作對照。

CityDistrictTwoViewModel

View:

View會分成上下兩個關聯式Picker來使用上面兩個ViewModel來看看是否都能實作。

結果測試:

心得與發現:

可以看到透過不同的寫法都能夠完成實作,透過同事的做法就不必在每個城市改變後再去透過迴圈重新加入相對應的行政區,只是前面會先需要建立好字典讓後面可以快速查找,這也是一個不錯的方式,互相探討反而收穫更多,持續加油!!

--

--