Swift Practice # 173 SwiftUI ScrollViewReader 跳至 Foreach 指定位置

上一篇完成了可以拿到指定的ID開啟相對的中央氣象局鄉鎮市區的JSON，讓自己的side Project可以多一個快速功能。

Swift Practice # 172 Swift 取得網頁資料並製作台灣鄉鎮氣象連結JSON

而這篇則要來優化一個自己寫ScrollView+Foreach的頁面遇到的一個小狀況。

有在使用SwiftUI的人多少有透過Foreach+NavigationView製作列表，簡單的狀況應該回如同下面的程式碼與Gif檔案演示一樣。

接著嘗試將上面的程式碼內的List換成ScrollView

可以直接把上面的some view替換成以下內容

不管是List還是ScrollView，在NavigationView與NavigationLink的狀態下，只要我們點擊返回到NavigationView時，原本ContentView的List或是ScrollView會停在原本點擊前的頁面，不會因為更新了View就把List或ScrollView拉回到最初第一個值的位置。

但因為自己的需要我在side project內沒有使用到NavigationView去建立父頁與子頁的關聯，嘗試透過一個Bool值進行頁面切換，來達成客製化自己的頁面樣貌。

可以看到上面的方法也能實現不同頁面的切換並將前一頁的資料傳給下一頁。而這種作法帶來最主要的問題，可以看到上面的Gif的只要返回顯示Foreach的頁面，因為重新渲染畫面，所以Foreach都會從第一個開始，不會像前兩個透過NavitgationLink返回會停在原本點的位置。所以要解決的問題是在不透過NavigationLink與NavigationView使Foreach返回頁面時至少能夠「看到」當初點擊的項目在View內。而這個時候就需要ScrollViewReader的協助。

從上面的Gif可以看到透過

.onAppear {
if (numStrArray.count - userClickIndex) > 4 {
index.scrollTo(userClickIndex, anchor: .center)
}else{
index.scrollTo(userClickIndex, anchor: .bottom)
}
}

上面的程式碼透過scrollTo的方法跳到指定的位置，至於為什麼要先判斷與實際Array的數量差距，原因在於如果是整個Array最後幾個的話，如果是在Center的話會發現下面會有留白(如下圖)

不過這樣子在顯示有點奇怪，所以在最後幾個會直接顯示在最下面。

以上就是在透過客製的View需要到跳到指定的位置的話，可以透過這個方法來跳到大致的位置。持續加油！！！

參考來源：

利用 ScrollViewReader 輕鬆讓滾動視圖滾動到特定位置

Apple Developer Documentation

How to make a scroll view move to a location using ScrollViewReader

GitHub - dogpa/Swift-Practice-173-ScrollViewReader