LongPressGuesture in SwiftUI

在SwiftUI中，我们偶尔也会使用到长按手势，他和点击手势很类似，但又不同。长按手势对于手指按下是有时间限制的默认是0.5s。我们一起来看看吧。

struct LongPressGestureSample: View {
    @State var isComplete: Bool = false
    
    var body: some View {
        Text(isComplete ? "Completed" : "No complete")
            .font(.title2)
            .padding()
            .padding(.horizontal, 10)
            .background(isComplete ? Color.green : Color.gray)
            .cornerRadius(10)
            .onLongPressGesture {
                isComplete.toggle()
            }
    }
}

当我们长按0.5s后，背景色和文字都会发生变化，这是简单的使用LongPressGuesture的形态。

onLongPressGuesture 支持多个参数，上面我们只是使用了最为简单的参数方法，下面我们来看看其他参数。

onLongPressGesture(
                        minimumDuration: 1.0,
                        maximumDistance: 50,
                        pressing: { flg in
                            print("flg (flg)")
                        }, perform: {
                            isComplete = true
                        })

pressing 这个参数很特别，当你在开始长按和解释长按时都会触发这个Boolean值，当你开始长按时flg值是true，结束或者松开长按手势时返回false

我们可以使用这个方法来完成一个进度条的功能，代码也非常少。功能如下：

1. 当我们长按完成时，进度条背景色变成绿色, 否则是灰色
2. 当我们开始长按时，进度条颜色时蓝色，如果进度条在规定时间内长按结束，那么进度条变成绿色
3. 如果长按手势时间不足规定时间，那么就取消进度条的进度，把进度变成0

我们会用两个变量来控制，一个变量来控制是否已经完成了长按手势，一个变量来控制长按手势是否加入或者离开/完成。

@State var isComplete: Bool = false
@State var isSuccess: Bool = false

VStack(spacing: 30) {
            Rectangle()
                .fill(isSuccess ? Color.green : Color.blue)
                .frame(maxWidth: isComplete ? .infinity : 0)
                .frame(height: 60)
                .frame(maxWidth: .infinity, alignment: .leading)
                .background(Color.gray)
                .cornerRadius(60/2)
            
            HStack {
                Text("Long Press Me")
                    .foregroundColor(.white)
                    .padding()
                    .background(Color.black)
                    .cornerRadius(10)
                    .onLongPressGesture(
                        minimumDuration: 1.0,
                        maximumDistance: 50,
                        pressing: { flg in
                            // 长按手势开始了
                            if flg {
                                withAnimation(.easeIn(duration: 1.0)) {
                                    isComplete = true
                                }
                            } else {
                              // 长按手势取消或完成
                                DispatchQueue.main.asyncAfter(deadline: .now()   0.1, execute: {
                                    if !isSuccess {
                                        withAnimation(.easeInOut) {
                                            isComplete = false
                                        }
                                    }
                                })
                            }
                        }, perform: {
                            // 长时手势设置的时间到了
                            isSuccess = true
                        })
                
                Text("Rest")
                    .foregroundColor(.white)
                    .padding()
                    .background(Color.black)
                    .cornerRadius(10)
                    .onTapGesture {
                        isSuccess = false
                        isComplete = false
                    }
            }
        }
        .padding()

主要逻辑在pressing方法里面。
当我们刚点击按钮时就会返回一次pressing值，此时为true，我们更新isComplete值，让它做动画，把宽度从0扩展到设定的.infinity的宽度。如果在长按期间有另一个值返回也就是false，

我们会在非常短的时间内做一个延迟检测变量的操作，如果isSuccess是true，那么就说明已经完成Perform方法，表明长按时间已经到了，证明动画已经完成了，我们就不做任何处理。 如果此时的isSuccess是false，那么证明手势未完成就离开了，那么进度条就要恢复到起始状态，也就是0宽度

一起来看看效果

大家有什么看法呢？欢迎留言讨论。
公众号：RobotPBQ

这篇好文章是转载于：学新通技术网