第 18 章
以SwiftUI 手勢與 GeometryReader 建立一個底部展開式頁面

現在你應該對 SwiftUI 手勢有一個基本的認識,我們來看如何應用這個你學過的技術來建立一個真實應用常見的功能。

底部頁面最近越來越受歡迎,你可以在一些知名的 App 像是 Facebook 與 Uber 看到這個功能。這個功能比較像是動作頁面(action sheet)的強化版,頁面會從畫面底部往上滑,並覆蓋在原始視圖的上面,頁面內容可以提供一些資訊或一些其他可供使用者選擇的選項。舉例來說,當你在 Instagram 儲存一張照片至照片集中,app會顯示一個底部頁面來選擇一個照片集。而 Facebook App 中,當點選貼文的省略號( ellipsis )按鈕,它會顯示附加動作項目的頁面。Uber App 也會使用底部頁面來顯示你所選行程的價位。

底部頁面的大小會依照內容資訊來做調整,在某些情況下,底部頁面會比較大(如常見的背景),大約會占滿畫面的 80-90%。通常使用者可以使用拖曳手勢來與頁面互動。你可以向上滑來展開它,向下滑動來縮小或關閉頁面。

圖 1. Uber、Facebook 與 Instagram 皆於 App 中使用底部頁面
圖 1. Uber、Facebook 與 Instagram 皆於 App 中使用底部頁面

本章,我們將會使用 SwiftUI 手勢來建立類似的可展開式底部頁面。這個範例 App 在主視圖中顯示一個餐廳列表。當使用者按下某家餐廳資訊時,App 會帶出一個底部頁面來顯示餐廳細節。你可以向上滑動來展開頁面。關閉頁面則可以使用向下滑動手勢。

圖 2. 建立一個可展開式底部頁面
圖 2. 建立一個可展開式底部頁面
想深入了解SwiftUI和下載完整程式碼?你可以從AppCoda網站購買《精通 SwiftUI》完整電子版。

results matching ""

    No results matching ""