#3 RotationGesture

5 阅读1分钟

功能

为 View 添加“双指旋转”手势,实时返回旋转角度(Angle 类型,相对 0°),支持跟踪变化与结束复位。

参数

  • onChanged:持续更新角度,可驱动实时旋转。
  • onEnded:常用于持久化角度或回弹到 0°;使用 withAnimation 可获得平滑复位效果。
  • 旋转锚点默认为视图中心,如需自定义,使用 .rotationEffect(angle, anchor: UnitPoint)

示例

struct RotationGestureBootcamp: View {
    
    @State var angle: Angle = Angle(degrees: 0)
    var body: some View {
        Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
            .font(.largeTitle)
            .fontWeight(.semibold)
            .foregroundStyle(.white)
            .padding()
            .background(Color.blue.cornerRadius(8))
            .rotationEffect(angle) // 应用旋转
            .gesture(
                RotationGesture()
                    .onChanged({ value in // 实时跟踪
                        angle = value
                    })
                    .onEnded({ value in
                        angle = Angle(degrees: 0) // 松开后复位
                    })
            )
    }
}

注意事项

  1. 需至少两根手指;模拟器请按住 Option 旋转。
  2. 同时存在缩放或拖拽手势时,可用 .simultaneousGesture 组合。
  3. Angle 支持弧度与角度,统一使用 Angle(degrees:)Angle(radians:) 转换。