手势操作在App中可谓是用途非常广泛了,常规的手势修饰符有TapGesture
点击手势、LongPressGesture
长按手势、DragGesture
拖拽手势,MagnificationGesture
放缩手势和 RoationGesture
旋转手势。
和常规的修饰符方法类似,只要将手势修饰符添加到视图中,系统就会自动识别用户的操作,并根据对应的手势交互执行相对应的指令。
本篇文章主要探索一下TapGesture
点击手势、LongPressGesture
长按手势。
TapGesture 点击手势
TapGesture
点击手势是使用频率最高的手势之一,用于触发点击动作。有时候点击手势修饰符代替了常规的Button
按钮.
struct TapGestureDemo: View {
@State private var backgroundColor: Color = .black
var body: some View {
RoundedRectangle(cornerRadius: 25)
.fill(backgroundColor)
.frame(width: 300, height: 200)
.onTapGesture {
backgroundColor = .red
}
}
}
添加点击手势直接在要点击的视图上加上.onTapGesture
修饰符即可,上面代码点击矩形后改变其自身的背景色。
默认是点击一下就生效,当然也可以设置连续点击几次才生效,比如:
.onTapGesture(count: 2, perform: {
backgroundColor = .red
})
在.onTapGesture
修饰符中传入count
参数即可,上面代码中,需要连续点击两下才生效。
SwiftUI还提供了.gesture
手势修饰符来进行手势识别,如下:
struct TapGestureDemo: View {
@State private var backgroundColor: Color = .black
var body: some View {
RoundedRectangle(cornerRadius: 25)
.fill(backgroundColor)
.frame(width: 300, height: 200)
.gesture(
TapGesture()
.onEnded({
backgroundColor = .red
})
)
}
}
将TapGesture()
添加到.gesture
修饰符的闭包中,点击结束后执行.onEnded
闭包中的逻辑。这个.onEnded
修饰符是用来修TapGesture
势的。
LongPressGesture 长按手势
LongPressGesture
比TapGesture
手势多了一个长按的操作,也就是点击后不是立即抬起,需要按住一段时间才会响应的手势。
长按手势的修饰符为:.onLongPressGesture
代码如下:
struct LongPressGesture: View {
@State private var backgroundColor: Color = .black
var body: some View {
RoundedRectangle(cornerRadius: 25)
.fill(backgroundColor)
.frame(width: 300, height: 200)
.onLongPressGesture {
backgroundColor = .red
}
}
}
还是上面的代码,长按后改变矩形的背景色。
.onLongPressGestue
修饰符有几个参数:
minimumDuration
:最短按住多久就响应事件。默认的长按时间是0.5秒。
.onLongPressGesture(minimumDuration: 2) {
......
}
maximumDistance
: 最长移动距离,按住后手指移动超过这个距离,且未到响应时间,则终止长按手势的响应事件。也就是相当于撤销了这次长按,比如用户误操作了,立即将手移走。默认值为10.
.onLongPressGesture(maximumDistance: 30) {
......
}
LongPressGestue
长按手势同样可以放到.gesture
修饰符的闭包中使用,并且给LongPressGestue
添加.onEnded
修饰符实现长按事件,同时还可以添加.onChanged
修饰符,具体如下:
.gesture(
LongPressGesture(minimumDuration: 2)
.onChanged({ state in
print("---> onChanged state: \(state)")
})
.onEnded({ state in
print("---> onEnded state: \(state)")
})
)
.onChanged
修饰符在刚按住的时候触发,闭包内返回一个bool
类型的参数,经测试返回true
。
.onEnded
修饰符在达到minimumDuration
时间时触发,闭包内返回一个bool
类型的参数,经测试返回true
。
除了这两个外,还可以添加一个.updating
修饰符。
struct LongPressGestureDemo: View {
@GestureState private var isLongPressing = false
var body: some View {
Circle()
.fill(Color.blue)
.frame(width: 100, height: 100)
.gesture(
LongPressGesture()
.updating($isLongPressing, body: { value, state, _ in
state = value
})
)
.scaleEffect(isLongPressing ? 1.5 : 1.0)
}
}
.updating
修饰符是一个更新方法,它需要绑定一个被@GestureState
修饰的变量,在长按的过程中,这个变量将会被赋值。
被@GestureState
修饰的变量记录了手势状态的变化,并且在每次手势动画结束后,变量的值将会重置到初始状态。
.updating
的body
闭包中有3个参数:
- 第一个参数:长按手势更新后的状态,即最新的状态值。
- 第二个参数:长按手势前一个状态,即上一次的状态值。
- 第三个参数:长按手势的上下文,基本用不到。
上面代码中我们将第一个参数赋值给第二个参数,也就是用最新的状态更新之前的状态,继而改变了绑定的变量的值。也就是说@GestureState
修饰的变量记录了第二个参数的值。
.updating
修饰符在LongPressGesture
上用处基本上是体现不出来,在DragGesture
中体现的还是比较明显的。
写在最后
本篇文章主要介绍了TapGesture
和LongPressGestue
,以及@GestureState
属性包装器的概念的等等,文章内容比较简单。
最后,希望能够帮助到有需要的朋友,如果觉得有帮助,还望点个赞,添加个关注,笔者也会不断地努力,写出更多更好用的文章。
标签:LongPressGesture,TapGesture,GestureState,修饰符,点击,SwiftUI,backgroundColor,手势 From: https://blog.csdn.net/guoyongming925/article/details/139123565