第 34 章
ScrollViewReader 和網格動畫

在前一章，我已介紹了新的 matchedGeometryEffect 修飾器 (modifier) ，並向你展示了如何創建一些基本的視圖動畫。 在本章中，讓我們看看如何在網格視圖中使用修飾器和加入過場動畫。 此外，你還將學習另一個名為ScrollViewReader的全新 UI 組件。

範例 App

在我們開始實作之前，讓我先向你展示最終的成果。 這應該讓你對要即將構建的內容有所了解。 當你開發 App時，你可能需要以網格（Grid）形式顯示照片並讓使用者選擇其中的一些項目。

範例 App 在螢幕底部顯示一個Dock，當一個項目被選中時，它會從網格中移除並插入到 Dock 中。 當你選擇更多項目時，個 Dock 自動擴大以容納更多項目。 你可以水平滑動以瀏覽Dock中的項目。 如果你點擊 Dock 中的其中一個項目，該項目就會被移除並重新加到網格中。

我們將實作這個範例App，並會使用 matchedGeometryEffect 修飾符加入絢麗的過場動畫。 開始之前，請到 https://www.appcoda.com/resources/swiftui7/SwiftUIGridViewAnimationStarter.zip 下載Starter項目。 該項目已包含樣本數據和圖像。

構建照片網格（Photo Grid）

首先，讓我們建立照片網格。 在 ContentView 結構體中，宣告一個狀態變數，如下所示：

想更深入學習SwiftUI和下載完整程式碼？你可以從 AppCoda網站購買《精通 SwiftUI》完整電子版。