Tilt widget

了解 Tilt widget 参数。 Tilt widget 仅管理手势、传感器以及动画的状态。

Tilt widget 仅管理手势、传感器以及动画的状态(无 UI 渲染)。
你可以在 Tilt widget 内部组合 Tilt 容器 widget 来封装不同的效果。

手势优先级

启用多个手势时,会按照优先级触发手势:

Touch > Hover > Controller > Sensors

Tilt widget 参数

参数名类型默认值描述
child 必选Widget-创建一个 widget,使 child widget 具有相应的倾斜状态。
tiltControllerTiltController?null用于自定义倾斜输入的控制器。
disableboolfalse禁用所有效果。
fpsint120手势触发的帧数。
tiltConfigTiltConfigTiltConfig()倾斜效果配置。
onGestureMovevoid Function(TiltDataModel, GesturesType)?null手势移动的回调触发。
onGestureLeavevoid Function(TiltDataModel, GesturesType)?null手势离开的回调触发。

TiltController

final TiltController tiltController = TiltController();

...


void dispose() {
  tiltController.dispose();
  super.dispose();
}

...

/// 处理 `move` 输入事件。
/// 应与 `leave` 配合使用以表示手势结束。
tiltController.move(position: Offset(xx, xx));

/// 处理 `leave` 输入事件。
/// 停止使用当前手势。
tiltController.leave(position: Offset(xx, xx));

参数名类型默认值描述
position 必选Offset-当前触发的坐标位置,
会触发对应位置的倾斜效果。
例如:
有一个组件尺寸为 width: 10, height: 10,
(0, 0):会触发最左上的倾斜。
(10, 10):会触发最右下的倾斜。
gesturesTypeGesturesTypeGesturesType.controller触发手势类型。
会根据 手势优先级 进行触发。
如果需要自定义动画或其他方式自行控制,
推荐 使用 GesturesType.controller
如果使用其他的类型进行触发,
那么就会受到对应类型相关配置、效果的影响。
例如:
自行触发 GesturesType.sensors 的时候。
配置 TiltConfig.enableSensorRevert 为 false 的情况下,
将同样不会复原至初始状态。

TiltConfig

参数名类型默认值描述
disableboolfalse仅禁用倾斜效果。
initialOffset?null倾斜进度的初始值,范围 (x, y):(1, 1) 至 (-1, -1)
你可以超过这个范围,但是手势移动过程中的最大倾斜角度始终按照 [TiltConfig.angle] 进行倾斜。
例如:(0.0, 0.0) 中心
(1.0, 1.0) 左上角最大倾斜角度 [TiltConfig.angle]
angledouble10.0最大倾斜角度。
例如:180 会翻转。
directionList<TiltDirection>?null倾斜方向,多方向、自定义方向值。
enableReverseboolfalse倾斜反向,可以向上或向下倾斜。
enableGestureSensorsbooltrue陀螺仪传感器触发倾斜。
仅以下手势生效:
GesturesType.sensors
sensorFactordouble10.0传感器触发系数(灵敏度)。
仅以下手势生效:
GesturesType.sensors
enableSensorRevertbooltrue启用传感器倾斜复原,会复原至初始状态。
仅以下手势生效:
GesturesType.sensors
sensorRevertFactordouble0.05传感器复原系数(阻尼),数值范围:0-1
仅以下手势生效:
GesturesType.sensors
sensorMoveDurationDurationDuration(milliseconds: 50)传感器移动时的动画持续时间。
仅以下手势生效:
GesturesType.sensors
enableGestureHoverbooltrueHover 手势触发倾斜。
仅以下手势生效:
GesturesType.hover
enableGestureTouchbooltrueTouch 手势触发倾斜。
仅以下手势生效:
GesturesType.touch
enableRevertbooltrue启用倾斜复原,会复原至初始状态。
仅以下手势生效:
GesturesType.touch
GesturesType.hover
GesturesType.controller
enableOutsideAreaMovebooltrue可以继续在区域外触发倾斜。
仅以下手势生效:
GesturesType.touch
GesturesType.controller
enterDurationDurationDuration(milliseconds: 1000)手势刚进入时的动画持续时间,需要搭配 [moveDuration][enterToMoveDuration] 使用。
仅以下手势生效:
GesturesType.touch
GesturesType.hover
moveDurationDurationDuration(milliseconds: 100)手势移动时的动画持续时间。
仅以下手势生效:
GesturesType.touch
GesturesType.hover
enterToMoveDurationDurationDuration(milliseconds: 600)手势从 Enter 过渡至 Move 的持续时间,需要搭配 [enterDuration][moveDuration] 使用。
仅以下手势生效:
GesturesType.touch
GesturesType.hover
leaveDurationDurationDuration(milliseconds: 300)手势离开后的动画持续时间。
仅以下手势生效:
GesturesType.touch
GesturesType.hover
moveCurveCurveCurves.linear手势移动时的动画曲线。
仅以下手势生效:
GesturesType.touch
GesturesType.hover
enterToMoveCurveCurveCurves.easeOutCubic手势从 Enter 过渡至 Move 的曲线,需要搭配 [enterToMoveDuration] 使用。
仅以下手势生效:
GesturesType.touch
GesturesType.hover
leaveCurveCurveCurves.linear手势离开后的动画曲线。
仅以下手势生效:
GesturesType.touch
GesturesType.hover
controllerMoveDurationDurationDuration(milliseconds: 100)controller 手势移动时的动画持续时间。
仅以下手势生效:
GesturesType.controller
controllerLeaveDurationDurationDuration(milliseconds: 300)controller 手势离开后的动画持续时间。
仅以下手势生效:
GesturesType.controller