SwiftUI-手势

SwiftUI为视图提供了许多手势，比如:
单击onTapGesture()
多击onTapGesture(count:)
长按onLongPressGesture()
放大MagnificationGesture()
旋转RotationGesture()

单击

Text("单击")
      .onTapGesture {
          print("单击🚀")
}

双击

Text("双击")
      .onTapGesture(count: 2) {
          print("双击🚀")
}

长按

长按相比单击手势复杂一点，是可以定制的。例如，指定需要满足的最少时长和最大时长。

Text("长按")
    .onLongPressGesture(minimumDuration: 1, maximumDistance: 3, pressing: { (isProgress) in
        print("长按进行中 -> \(isProgress)")
     }) {
         print("长按🚀")
}

长按进行中 -> true
长按进行中 -> false
长按🚀

对于更高级的手势，你需要使用gesture()Modifier，并提供DragGesture，LongPressGesture， MagnificationGesture，RotationGesture 或 TapGesture。这些手势都有特定Modifier，最常用包括手势进行中onEnded ()，已完成onEnded ()，你可以在这里执行动作。

放大

struct ContentView: View {
    @State private var currentAmount: CGFloat = 0
    @State private var finalAmount: CGFloat = 1

    var body: some View {
        Text("放大")
            .scaleEffect(finalAmount + currentAmount)
            .gesture(
                MagnificationGesture()
                    .onChanged { amount in
                        self.currentAmount = amount - 1
                    }
                    .onEnded { amount in
                        self.finalAmount += self.currentAmount 
                        self.currentAmount = 0
                    }
            )
    }
}

旋转

struct ContentView: View {
    @State private var currentAngle: Angle = .degrees(0)
    @State private var finalAngle: Angle = .degrees(0)

    var body: some View {
        Text("旋转")
            .rotationEffect(currentAmount + finalAmount)
            .gesture(
                RotationGesture()
                    .onChanged { angle in
                        self.currentAmount = angle
                    }
                    .onEnded { angle in
                        self.finalAmount += self.currentAmount
                        self.currentAmount = .degrees(0)
                    }
            )
    }
}

手势冲突

加入子视图和父视图同时有单击手势，点击子视图默认只会触发子视图的单击手势，我们可以使用highPriorityGesture ()来强制父视图的手势优先。或者使用simultaneousGesture ()来使父视图和子视图的手势同时触发。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("单击")
                .onTapGesture {
                    print("单击🚀")
                }
        }
    // simultaneousGesture(父视图和子视图同时触发) highPriorityGesture(高优先级，优先触发)
        .simultaneousGesture(
            TapGesture()
                .onEnded { _ in
                    print("VStack🚀")
                }
        )
    }
}

手势序列

SwiftUI还可以创建手势序列，序列中的手势之间存在引用，只有前一个手势成功识别之后才会被激活识别。

struct DragView: View {
    
    // 圆被拖拽的偏移量
    @State private var offset = CGSize.zero
    // 圆是否正在被拖拽
    @State private var isDragging = false

    var body: some View {
        
        // 拖拽手势更新偏移量，结束后更新偏移量和isDragging
        let dragGesture = DragGesture()
            .onChanged { (value) in
                self.offset = value.translation
        }
        .onEnded { (_) in
            withAnimation {
                self.offset = .zero
                self.isDragging = false
            }
        }
        // 长按手势激活isDragging
        let pressGesture = LongPressGesture()
            .onEnded { (value) in
                withAnimation {
                    self.isDragging = true
                }
        }
        // 组合手势
        let combined = pressGesture.sequenced(before: dragGesture)
        
        return Circle()
            .fill(Color.blue)
            .frame(width: 80, height: 80)
            .scaleEffect(isDragging ? 2 : 1)
            .offset(offset)
            .gesture(combined)
    }
}

全部示例代码

ContentView

struct ContentView: View {
    
    // 记录放大的值
    @State private var currentAmount: CGFloat = 0
    @State private var finalAmount: CGFloat = 1
    // 记录旋转的值
    @State private var currentAngle: Angle = .degrees(0)
    @State private var finalAngle: Angle = .degrees(0)
    
    var body: some View {
        
        VStack {
        
            VStack {
                Text("单击")
                    .onTapGesture {
                        print("单击🚀")
                }.padding(.top).padding(.horizontal)
                Text("双击")
                    .onTapGesture(count: 2) {
                        print("双击🚀")
                }.padding(.top)
                Text("长按")
                    .onLongPressGesture(minimumDuration: 1, maximumDistance: 3, pressing: { (isProgress) in
                        print("长按进行中 -> \(isProgress)")
                    }) {
                        print("长按🚀")
                }.padding(.top)
                Text("放大")
                .scaleEffect(finalAmount + currentAmount)
                .gesture(
                    MagnificationGesture()
                        .onChanged({ (amount) in
                            self.currentAmount = amount - 1
                        })
                        .onEnded({ (amount) in
                            self.finalAmount += self.currentAmount
                            self.currentAmount = 0
                        })
                ).padding(.top)
                Text("旋转")
                .rotationEffect(finalAngle + currentAngle)
                .gesture(
                    RotationGesture()
                        .onChanged({ (angle) in
                            self.currentAngle = angle
                        })
                        .onEnded({ (angle) in
                            self.finalAngle += self.currentAngle
                            self.currentAngle = .degrees(0)
                        })
                ).padding(.vertical)
                
            }
            .font(.title)
            .background(Color.red)
    //          simultaneousGesture(父视图和子视图同时触发) highPriorityGesture(高优先级，优先触发)
            .simultaneousGesture(
                TapGesture()
                    .onEnded({ (_) in
                        print("VStack🚀")
                    })
            )
            
            // 拖拽view
            DragView()
        }
    }
}

DragView

struct DragView: View {
    
    // 手势序列
    // 圆被拖拽的偏移量
    @State private var offset = CGSize.zero
    // 圆是否正在被拖拽
    @State private var isDragging = false

    var body: some View {
        
        // 拖拽手势更新偏移量，结束后更新偏移量和isDragging
        let dragGesture = DragGesture()
            .onChanged { (value) in
                self.offset = value.translation
        }
        .onEnded { (_) in
            withAnimation {
                self.offset = .zero
                self.isDragging = false
            }
        }
        // 长按手势激活isDragging
        let pressGesture = LongPressGesture()
            .onEnded { (value) in
                withAnimation {
                    self.isDragging = true
                }
        }
        // 组合手势
        let combined = pressGesture.sequenced(before: dragGesture)
        
        return Circle()
            .fill(Color.blue)
            .frame(width: 80, height: 80)
            .scaleEffect(isDragging ? 2 : 1)
            .offset(offset)
            .gesture(combined)
    }
}