[[400610]]

前言

在 SwiftUI 中，我們可以通過添加不同的交互來使我們的應(yīng)用程序更具交互性，這些交互可以響應(yīng)我們的點(diǎn)擊，點(diǎn)擊和滑動(dòng)。

今天，我們將回顧SwiftUI基本手勢(shì)：

• TapGesture
• 長按手勢(shì)
• 拖動(dòng)手勢(shì)
• 放大手勢(shì)
• 旋轉(zhuǎn)手勢(shì)

TapGesture

輕擊手勢(shì)使我們能夠識(shí)別 View 上的一個(gè)或多個(gè)輕擊。我們有幾種方法可以添加點(diǎn)擊手勢(shì)。

第一個(gè)是直接使用 .onTapGesture 修飾符。

Circle() 
  .onTapGesture { 
    // Respond to Tap Gesture  
  } 

SwiftUI 文檔中使用的其他選項(xiàng)是通過創(chuàng)建手勢(shì)并將其配置為屬性，然后將其與 .gesture(_：include :) 修飾符一起使用。

注意： 為了執(zhí)行某項(xiàng)操作或響應(yīng)輕擊，我們需要使用 .onEnded 操作關(guān)閉，該操作在手勢(shì)結(jié)束時(shí)觸發(fā)。

struct SingleTapGestureView: View { 
  var singleTap: some Gesture { 
      TapGesture() 
          .onEnded { _ in 
              // Respond to Tap Gesture 
          } 
  } 
 
  var body: some View { 
      Circle() 
          .gesture(singleTap) 
  } 
} 

實(shí)際上，我更喜歡第二種方法，因?yàn)檫@樣我們可以創(chuàng)建不同的手勢(shì)并通過我們的代碼重復(fù)使用它們。

因此，如果我們將代碼放在一起，就可以開始編寫類似的東西。

struct TapGestureView: View { 
    @State private var isAnimating = false 
    @State private var tapped1x = 0 
 
    var singleTap: some Gesture { 
        TapGesture() 
            .onEnded { _ in 
                tapped1x += 1 
 
                withAnimation(Animation.easeOut(duration: 0.5)) { 
                    self.isAnimating = true 
                } 
 
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) { 
                    self.isAnimating = false 
                } 
            } 
    } 
 
    var body: some View { 
        VStack { 
            Text("Tapped 1X: \(tapped1x) times") 
                .font(.caption) 
 
            Circle() 
                .frame(width: 80, height: 80) 
                .foregroundColor(.orange) 
                .overlay( 
                    Text("1X") 
                        .fontWeight(.medium) 
                ) 
                .background( 
                    Circle() 
                        .strokeBorder(Color.blue, lineWidth: 3) 
                        .scaleEffect(isAnimating ? 1.5 : 1) 
                        .opacity(isAnimating ? 0 : 1) 
                ) 
                .gesture(singleTap) 
        } 
    } 
} 

類似地，我們只需使用 TapGesture(count：Int) 初始化程序就可以控制要響應(yīng)的數(shù)量。

在這種情況下，您需要點(diǎn)擊3次才能觸發(fā) .onEnded 操作關(guān)閉。

struct TapGesture3xView: View { 
    @State private var isAnimating = false 
    @State private var tapped3x = 0 
 
    var multipleTap: some Gesture { 
        TapGesture(count: 3) 
            .onEnded { _ in 
                tapped3x += 1 
 
                withAnimation(Animation.easeOut(duration: 0.5)) { 
                    self.isAnimating = true 
                } 
 
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) { 
                    self.isAnimating = false 
                } 
            } 
    } 
 
    var body: some View { 
        VStack { 
            Text("Tapped 3X: \(tapped3x) times") 
                .font(.caption) 
 
            Circle() 
                .frame(width: 80, height: 80) 
                .foregroundColor(.orange) 
                .overlay( 
                    Text("3X") 
                        .fontWeight(.medium) 
                ) 
                .background( 
                    Circle() 
                        .strokeBorder(Color.blue, lineWidth: 3) 
                        .scaleEffect(isAnimating ? 1.5 : 1) 
                        .opacity(isAnimating ? 0 : 1) 
                ) 
                .gesture(multipleTap) 
        } 
    } 
} 

長按手勢(shì)

長按手勢(shì)可讓我們?cè)谟脩糸L按定義的時(shí)間后以及在用戶長按的時(shí)間內(nèi)執(zhí)行操作。

我們可以設(shè)置一個(gè)最小持續(xù)時(shí)間，以識(shí)別我們的長按手勢(shì)?？梢栽?LongPressGesture 初始化程序中進(jìn)行設(shè)置。

LongPressGesture(minimumDuration: 2) 

然后，我們可以使用 .updating 方法在長按期間執(zhí)行操作，并使用 .onEnded 在識(shí)別到我們的手勢(shì)時(shí)執(zhí)行操作。

在此示例中，我將在長按操作期間更新 Circle() 的大小和顏色，并且當(dāng)識(shí)別出手勢(shì)時(shí)，我將顯示“文本已完成”。

另外，我在這里使用的是 GestureState 屬性包裝器，該包裝器在長按期間設(shè)置為 true ，在手勢(shì)結(jié)束時(shí)設(shè)置為 false 。我正在將此屬性包裝器用于示例動(dòng)畫。

struct LongPressGestureView: View { 
    @GestureState private var isLongPressDetected = false 
    @State private var isDone = false 
 
    var longPress: some Gesture { 
        LongPressGesture(minimumDuration: 2) 
            .updating($isLongPressDetected) { currentState, gestureState, transaction in 
                DispatchQueue.main.async { 
                    isDone = false 
                } 
                gestureState = currentState 
                transaction.animation = Animation.easeIn(duration: 2) 
            } 
            .onEnded { done in 
                isDone = done 
            } 
    } 
 
    var body: some View { 
        VStack { 
            Spacer() 
 
            Circle() 
                .frame(width: 10, height: 10) 
                .foregroundColor(isLongPressDetected ? .orange : .primary) 
                .scaleEffect(CGSize( 
                                width: isLongPressDetected ? 10 : 1, 
                                height: isLongPressDetected ? 10 : 1)) 
 
            Spacer() 
            if isLongPressDetected { 
                Text("Updating...") 
            } 
 
            if isDone { 
                Text("Done") 
            } 
 
            Spacer() 
 
            Text("Long Press 2 sec") 
                .padding() 
                .background(isLongPressDetected ? Color.green : Color.orange) 
                .cornerRadius(16) 
                .gesture(longPress) 
        } 
    } 
} 

 拖動(dòng)手勢(shì)

拖動(dòng)手勢(shì)允許我們?cè)谕蟿?dòng)視圖時(shí)執(zhí)行操作。

我們可以利用并使用 .onChanged 和 .onEnded 關(guān)閉方法來執(zhí)行某些操作。這兩種方法都為我們提供了出色的屬性 DragGesture.Value，該屬性存儲(chǔ)以下拖動(dòng)動(dòng)作信息：

location

predictedEndLocation

predictedEndTranslation

startLocation

time

translation

我們可以使用該屬性來創(chuàng)建可移動(dòng)視圖。在當(dāng)前示例中，我使用 .onChanged 方法更新 Circle() 位置坐標(biāo)。

struct DragGestureView: View { 
    @State private var location: CGPoint = CGPoint(x: 100, y: 100) 
 
    var drag: some Gesture { 
        DragGesture(minimumDistance: 1, coordinateSpace: .local) 
            .onChanged { value in 
                location = value.location 
            } 
    } 
 
    var body: some View { 
        Circle() 
            .frame(width: 100, height: 100) 
            .foregroundColor(.orange) 
            .position(location) 
            .gesture(drag) 
    } 
} 

在這里，添加了 .onEnded 方法，以在拖動(dòng)結(jié)束后重置 Circle() 位置坐標(biāo)。

struct DragGestureView: View { 
    @State private var location: CGPoint = CGPoint(x: 100, y: 100) 
 
    var drag: some Gesture { 
        DragGesture(minimumDistance: 1, coordinateSpace: .local) 
            .onChanged { value in 
                location = value.location 
            } 
            .onEnded { value in 
                withAnimation(.easeOut) { 
                    location = CGPoint(x: 100, y: 100) 
                } 
            } 
    } 
 
    var body: some View { 
        Circle() 
            .frame(width: 100, height: 100) 
            .foregroundColor(.orange) 
            .position(location) 
            .gesture(drag) 
    } 
} 

放大手勢(shì)

當(dāng)我們?cè)赩iew上應(yīng)用放大動(dòng)作時(shí)，放大手勢(shì)允許做出一些動(dòng)作。

在這里，還有 .onChanged 和 .onEnded 閉包，我們可以使用它們來在放大動(dòng)作期間或結(jié)束時(shí)進(jìn)行響應(yīng)。作為屬性，接收到的是 CGFloat 的 MagnificationGesture.Value 。我們可以以此為例來更改視圖大小。

struct MagnificationGestureView: View { 
    @State var magnifiedValue: CGFloat = 1.0 
 
    var magnification: some Gesture { 
        MagnificationGesture() 
            .onChanged { value in 
                magnifiedValue = value 
            } 
            .onEnded { value in 
                magnifiedValue = 1.0 
            } 
    } 
 
    var body: some View { 
        Circle() 
            .frame(width: 100 * magnifiedValue, height: 100 * magnifiedValue) 
            .foregroundColor(.orange) 
            .gesture(magnification) 
            .animation(.easeOut) 
    } 
} 

旋轉(zhuǎn)手勢(shì)

旋轉(zhuǎn)手勢(shì)允許旋轉(zhuǎn)視圖，并在旋轉(zhuǎn)過程中和旋轉(zhuǎn)結(jié)束時(shí)以某些動(dòng)作做出響應(yīng)。

它還為我們提供了 .onChanged 和 .onEnded 閉包，這些閉包為我們提供了 RotationGesture.Value，它表示手勢(shì) Angle 值。我們可以使用該值旋轉(zhuǎn)視圖。

struct RotationGestureView: View { 
    @State private var angle = Angle(degrees: 0.0) 
    @State private var backgroundAngle = Angle(degrees: 0.0) 
 
    var rotation: some Gesture { 
        RotationGesture() 
            .onChanged { angle in 
                self.angle = angle 
            } 
            .onEnded { angle in 
                withAnimation(Animation.spring()) { 
                    self.backgroundAngle = angle 
                } 
            } 
    } 
 
    var body: some View { 
        Rectangle() 
            .frame(width: 150, height: 150, alignment: .center) 
            .foregroundColor(.orange) 
            .rotationEffect(self.angle) 
            .gesture(rotation) 
            .background( 
                Rectangle() 
                    .shadow(color: .primary, radius: 10, x: 0.0, y: 0.01) 
                    .foregroundColor(.secondary) 
                    .rotationEffect(backgroundAngle) 
            ) 
    } 
} 

總結(jié)

上面是對(duì) SwiftUI 基本手勢(shì)的總結(jié)。我們可以實(shí)現(xiàn)更多的交互使我們的 App 變得更生動(dòng)。

對(duì)于高級(jí)的使用，可以將手勢(shì)組合或者同時(shí)使用以做出響應(yīng)，或者可以實(shí)現(xiàn)自己的自定義手勢(shì)。