文章

添加手势互动操作

使用手势修饰符为你的 App 添加互动操作。

概览

手势修饰符用于处理用户输入事件 (例如,触控) 处理所需的所有逻辑,并识别这类事件何时与已知的手势模式 (例如,长按或旋转) 匹配。在识别到模式时,SwiftUI 会运行一个回调,供你用来更新视图状态或执行操作。

将手势修饰符添加到视图

你添加的每个手势都会应用于视图层次结构中的特定视图。若要识别特定视图上的手势事件,请创建并配置相关手势,然后使用 gesture(_:including:) (英文) 修饰符:


struct ShapeTapView: View {
    var body: some View {
        let tap = TapGesture()
            .onEnded { _ in
                print("View tapped!")
            }
        
        return Circle()
            .fill(Color.blue)
            .frame(width: 100, height: 100, alignment: .center)
            .gesture(tap)
    }
}

响应手势回调

每当手势状态发生变化时,SwiftUI 都会根据你添加到手势修饰符的回调反馈给你的代码。手势修饰符提供三种方式来接收更新:updating(_:body:) (英文)onChanged(_:) (英文)onEnded(_:) (英文)

更新瞬时 UI 状态

若要在手势发生变化时更新视图,请将 GestureState (英文) 属性添加到你的视图,并在 updating(_:body:) (英文) 回调中更新它。SwiftUI 会在识别到手势以及手势的值发生变化时立即调用更新回调。例如,SwiftUI 会在放大手势一开始便调用更新回调,然后在每次放大值发生变化时再次调用回调。SwiftUI 在用户结束或取消手势时不会调用更新回调。这时,手势状态属性会自动将其状态重置为初始值。

例如,若要创建一个在用户执行长按时改变颜色的视图,请添加一个手势状态属性并在更新回调中更新它。


struct CounterView: View {
    @GestureState var isDetectingLongPress = false
    
    var body: some View {
        let press = LongPressGesture(minimumDuration: 1)
            .updating($isDetectingLongPress) { currentState, gestureState, transaction in
                gestureState = currentState
            }
        
        return Circle()
            .fill(isDetectingLongPress ? Color.yellow : Color.green)
            .frame(width: 100, height: 100, alignment: .center)
            .gesture(press)
    }
}

在某个手势期间更新永久状态

若要跟踪手势的变化且在手势结束后不应重置,请使用 onChanged(_:) (英文) 回调。例如,若要对你的 App 识别长按的次数进行计数,请添加一个 onChanged(_:) (英文) 回调并递增计数器值。


struct CounterView: View {
    @GestureState var isDetectingLongPress = false
    @State var totalNumberOfTaps = 0
    
    var body: some View {
        let press = LongPressGesture(minimumDuration: 1)
            .updating($isDetectingLongPress) { currentState, gestureState, transaction in
                gestureState = currentState
            }.onChanged { _ in
                self.totalNumberOfTaps += 1
            }
        
        return VStack {
            Text("\(totalNumberOfTaps)")
                .font(.largeTitle)
            
            Circle()
                .fill(isDetectingLongPress ? Color.yellow : Color.green)
                .frame(width: 100, height: 100, alignment: .center)
                .gesture(press)
        }
    }
}

在手势结束时更新永久状态

若要识别手势在何时成功完成并检索手势的最终值,请在回调中使用 onEnded(_:) (英文) 函数来更新你的 App 的状态。SwiftUI 仅在手势成功时才会调用 onEnded(_:) (英文) 回调。例如,在一个 LongPressGesture (英文) 期间,如果用户在经过 minimumDuration (英文) 秒之前停止触控视图,或者他们的手指移动超过了 maximumDistance (英文) 点,则 SwiftUI 不会调用 onEnded(_:) (英文) 回调。

例如,若要在用户完成长按后停止长按尝试计数,请添加一个 onEnded(_:) (英文) 回调并有条件地应用手势修饰符。


struct CounterView: View {
    @GestureState var isDetectingLongPress = false
    @State var totalNumberOfTaps = 0
    @State var doneCounting = false
    
    var body: some View {
        let press = LongPressGesture(minimumDuration: 1)
            .updating($isDetectingLongPress) { currentState, gestureState, transaction in
                gestureState = currentState
            }.onChanged { _ in
                self.totalNumberOfTaps += 1
            }
            .onEnded { _ in
                self.doneCounting = true
            }
        
        return VStack {
            Text("\(totalNumberOfTaps)")
                .font(.largeTitle)
            
            Circle()
                .fill(doneCounting ? Color.red : isDetectingLongPress ? Color.yellow : Color.green)
                .frame(width: 100, height: 100, alignment: .center)
                .gesture(doneCounting ? nil : press)
        }
    }
}

另请参阅

基本手势