上一節我們用 downloadTask() 下載芝加哥博物館的高解析度藏品圖片,目的當然就是要仔細觀賞作品細節,本節我們利用「拖曳手勢」來放大、移動圖片,以便觀賞作品每處細節。
第2單元第2-6課曾列出SwiftUI 提供的手勢操作,拖曳手勢是其中相當重要的一種:
表2-6e 手勢操作元件
# | 手勢操作元件 | 說明 | 學習地圖 |
---|---|---|---|
1 | Gesture | 手勢規範(protocol) | 3-5課 |
2 | TapGesture | 點按 | 2-10課 |
3 | LongPressGesture | 長壓 | - |
4 | DragGesture | 拖曳 | 3-5課 |
5 | MagnificationGesture | 放大 | - |
6 | RotationGesture | 旋轉 | - |
7 | SequenceGesture | 依序組合 | - |
之前我們只用過最簡單的點按手勢(TapGesture),並且是以視圖修飾語(View Modifier) .onTapGesture 的形式,不過除了 TapGesture 與 LongPressGesture 提供對應的修飾語之外,其他手勢則是透過一個通用的修飾語 .gesture() 來使用。
所謂「拖曳」,即按壓某個圖案並加以拖動的手勢,動作上分成兩步驟,第一步是按壓不放,第二步是移動到目的地然後放開。我們先來看拖曳手勢的基本用法:
struct 抓大圖: View {
var 拖曳: some Gesture {
DragGesture(minimumDistance: 0.0, coordinateSpace: .local) {
.onChanged { 拖曳參數 in
<匿名函式1>
}
.onEnded { 拖曳參數 in
<匿名函式2>
}
}
}
var body: some View {
Image(uiImage: 下載圖片!)
.offset(位移)
.gesture(拖曳)
}
}
首先,在某個視圖定義中,先用 var 定義一個「手勢變數」,類型是 "some Gesture",這個定義方式跟 body 很像,因為 Gesture 也是一種規範(Protocol),之前提過規範是一種大的類別,就像視圖(View)一樣,Gesture 規範包含了上表中的手勢物件類型,如下圖。
要產出 DragGesture 物件實例,可包含兩個參數(均可省略,因為都有預設值):
當按壓移動距離超過 minimumDistance 才會辨識為拖曳手勢,預設值為10點,意思是至少移動10點才視為拖曳手勢,但範例中我們將 minimumDistance 改為 0.0,即使只是按壓沒有移動,也會讓拖曳手勢的匿名函式處理。
DragGesture() 第二個參數是 coordinationSpace,用來選擇螢幕座標空間,若是 .global 表示全螢幕座標(原點為螢幕左上角),若為 .local 則表示視圖的區域座標(原點為視圖範圍左上角)。