SwiftUI学习笔记Gesture的用法

Gestures

新建工程，随意命名，接下来要使用Gestures的点击，长按，拖动，缩放，旋转等功能。
首先，放置一个用于操作手势的物件，比如英语学习单词卡片，代码

ZStack {
           Rectangle()
                .fill(Color.red)
                .frame(width: 320, height: 210, alignment: .center)
                .cornerRadius(12)
            VStack{
                Spacer()
                Text("Are you kidding?")
                    .font(.largeTitle)
                    .foregroundColor(.white)
                Text("玩呢？")
                        .font(.title)
                        .foregroundColor(.white)
                
                Spacer()
            }
            
        }

效果如图
在这里插入图片描述

TapGesture
然后加入最简单的，点击手势，先定义变量

@State private var revealed = false

可以直接在ZStack后加入modifier，添加手势，如：
在这里插入图片描述
但是这样会后期加入更多手势以及手势操作会变得比较混乱，所以推荐在手势比较多的时候，单独定义每一个手势，可以在body内定一，这样就需要引入return，如果是SwiftUI2.0则需要

@ViewBuilder
var body: some View {

类似这样。为了少些操作，我将手势定义到struct内，body外，如图
在这里插入图片描述
然后修改解释部分代码

然后modifier

}.gesture(tapPress)

在这里插入图片描述

最简单的点击手势完成。

LongPressGesture()
加入长按手势

@GestureState var isDetectingLongPress = false
@State var completedLongPress = false
var longPress: some Gesture {
        LongPressGesture(minimumDuration: 3)
            .updating($isDetectingLongPress) { currentstate, gestureState,
                    transaction in
                gestureState = currentstate
                transaction.animation = Animation.easeIn(duration: 2.0)
            }
            .onEnded { finished in
                self.completedLongPress = finished
        }
    }

当长按时，isDetecingLongPress实时更新，completedLongPress用来判断长按结束。
加入长按的modifier，长按时,使用动画easeIn方式，0.5秒图形尺寸变大1.1倍。
参数mininumDuration:3
即长按超过三秒则取消长按状态。

}
       .scaleEffect(self.isDetectingLongPress ? 1.1 : 1.0)
       .gesture(longPress)
       .gesture(tapPress)

如果是这个顺序，则点击功能失效，换个顺序则可以了.

.scaleEffect(self.isDetectingLongPress ? 1.1 : 1.0)
.gesture(tapPress)
.gesture(longPress)

还可在定义tapGesture时定义在long press之前执行，则只需加入一次手势modifier,即可

var tapPress: some Gesture{
        TapGesture()
        .onEnded({
            self.revealed.toggle()
            })
        .exclusively(before: longPress)
    }

 }
  .scaleEffect(self.isDetectingLongPress ? 1.1 : 1.0)
  .gesture(tapPress)

这是放大图与正常图对比
在这里插入图片描述

下一章学习拖动与缩放，以及手势之间联动。

SwiftUI学习笔记Gesture的用法

Gestures

猜你喜欢