SwiftUI 基本手勢(shì)有哪些

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)SwiftUI 基本手勢(shì)有哪些，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

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

SwiftUI基本手勢(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)         }     } }

長(zhǎng)按手勢(shì)

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

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

LongPressGesture(minimumDuration: 2)

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

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

另外，我在這里使用的是 GestureState 屬性包裝器，該包裝器在長(zhǎng)按期間設(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)             )     } }

上述就是小編為大家分享的SwiftUI 基本手勢(shì)有哪些了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。