這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)SwiftUI 基本手勢(shì)有哪些，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
10年積累的做網(wǎng)站、網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶(hù)對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶(hù)得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站策劃后付款的網(wǎng)站建設(shè)流程，更有克拉瑪依區(qū)免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
在 SwiftUI 中，我們可以通過(guò)添加不同的交互來(lái)使我們的應(yīng)用程序更具交互性，這些交互可以響應(yīng)我們的點(diǎn)擊，點(diǎn)擊和滑動(dòng)。
SwiftUI基本手勢(shì)：
輕擊手勢(shì)使我們能夠識(shí)別 View 上的一個(gè)或多個(gè)輕擊。我們有幾種方法可以添加點(diǎn)擊手勢(shì)。
第一個(gè)是直接使用 .onTapGesture 修飾符。
重慶分公司
重慶分公司
Circle() .onTapGesture { // Respond to Tap Gesture }SwiftUI 文檔中使用的其他選項(xiàng)是通過(guò)創(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ì)并通過(guò)我們的代碼重復(fù)使用它們。
因此，如果我們將代碼放在一起，就可以開(kāi)始編寫(xiě)類(lèi)似的東西。
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) } } }類(lèi)似地，我們只需使用 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ì)可讓我們?cè)谟脩?hù)長(zhǎng)按定義的時(shí)間后以及在用戶(hù)長(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)畫(huà)。
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ì)允許我們?cè)谕蟿?dòng)視圖時(shí)執(zhí)行操作。
我們可以利用并使用 .onChanged 和 .onEnded 關(guān)閉方法來(lái)執(zhí)行某些操作。這兩種方法都為我們提供了出色的屬性 DragGesture.Value，該屬性存儲(chǔ)以下拖動(dòng)動(dòng)作信息：
location
predictedEndLocation
predictedEndTranslation
startLocation
time
translation
我們可以使用該屬性來(lái)創(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) } }當(dāng)我們?cè)赩iew上應(yīng)用放大動(dòng)作時(shí)，放大手勢(shì)允許做出一些動(dòng)作。
在這里，還有 .onChanged 和 .onEnded 閉包，我們可以使用它們來(lái)在放大動(dòng)作期間或結(jié)束時(shí)進(jìn)行響應(yīng)。作為屬性，接收到的是 CGFloat 的 MagnificationGesture.Value 。我們可以以此為例來(lái)更改視圖大小。
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)視圖，并在旋轉(zhuǎn)過(guò)程中和旋轉(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ì)有哪些了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
