手势篇
概述
Flutter中的手势分为两层,第一层是触摸原始指针(Pointer)事件,描述了屏幕上指针(如触摸、鼠标和触控笔)的位置和移动。 指针(Pointer)代表用户与屏幕交互的原始数据,有四种事件类型:
PointerDownEvent: 指针接触到屏幕 PointerMoveEvent: 指针从屏幕上的一个位置移动到另一个位置 PointerUpEvent: 指针停止接触屏幕 PointerCancelEvent: 指针的输入事件不再针对此应用(事件取消)
第二层就是我们可以检测到的手势,主要分为三大类:轻击、拖动和缩放。
GestureDetector
GestureDetector可以进行手势检测,如单击,双击,长按,垂直、水平拖动等。
GestureDetector事件描述
| 事件名 | 描述 |
|---|---|
| onTapDown | 点击屏幕立即触发 |
| onTapUp | 手指离开屏幕 |
| onTap | 点击屏幕 |
| onTapCancel | 点击事件结束,onTapDown不会再触发点击事件 |
| onDoubleTap | 快速连续两次在同一位置点击屏幕 |
| onLongPress | 长按 |
| onVerticalDragStart | 与屏幕接触,可能会开始垂直移动 |
| onVerticalDragUpdate | 与屏幕接触,已经沿垂直移动 |
| onVerticalDragEnd | 先前与屏幕接触并垂直移动的指针不再与屏幕接触,并且在停止接触屏幕时以特定速度移动 |
| onHorizontalDragStart | 与屏幕接触,可能会开始水平移动 |
| onHorizontalDragUpdate | 与屏幕接触,已经沿水平移动 |
| onHorizontalDragEnd | 先前与屏幕接触并水平移动的指针不再与屏幕接触,并在停止接触屏幕时以特定速度移动 |
Dissmissible
可用于实现滑动删除。
常见属性
| 属性名 | 类型 | 说明 |
|---|---|---|
| onDismissed | DismissDirectionCallback | 当包裹的组件消失后回调 |
| movementDuration | Duration | 定义组件消失的时长 |
| onResize | VoidCallback | 组件大小改变时的回调 |
| resizedDuration | Duration | 组件大小改变时长 |
| child | Widget | 子元素,滑动时显示的组件 |
动画篇
概述
Flutter中的动画分为补间(Tween)动画和基于物理(Physics-based)的动画。
- 在补间动画中,定义了开始点和结束点、时间线以及定义转换时间和速度的曲线,然后由框架自动计算如何从开始点过渡到结束点。
- 在基于物理的动画(遵循物理学定律)中,运动被模拟为与真实世界的行为相似,可以模拟弹簧、阻尼、重力等物理效果。例如,当你掷球时,它在何处落地,取决于抛球速度有多快、球有多重、距离地面有多远。类似地,将连接在弹簧上的球落下(并弹起)与连接到绳子上的球放下的方式也是不同。
Animation
四种状态:
- dismissed:动画初始状态
- forward:动画从头到尾播放状态
- reverse:动画从尾到头播放状态
- completed:动画完成状态
Animation类是Flutter动画中核心的抽象类,它包含动画的当前值和状态两个属性。定义了动画的一系列监听回调。
- 值监听:addListener、removeListener
- 状态监听:addStatusListener、removeStatusListener
AnimationController
动画的控制。
- AnimationController是一个特殊的Animation对象,在屏幕刷新的每一帧,就会生成一个新的值,默认情况下,AnimationController在给定的时间段内会线性的生成从0.0到1.0的数字
- 属于Animation类型
- 具有控制动画的方法,例如,.forward()方法可以启动动画
- 当创建一个AnimationController时,需要传递一个vsync参数,存在vsync时会防止屏幕外动画(动画的UI不在当前屏幕时)消耗不必要的资源。
- 通过将SingleTickerProviderStateMixin添加到类定义中,可以将stateful对象作为vsync的值。如果要使用自定义的State对象作为vsync时,请包含TickerProviderStateMixin。
- 特别注意:在不使用时需要调用dispose方法,否则会造成资源泄露
Curve
定义了时间和数值的抽象类。Flutter封装定义了一系列的插值器,如linear、decelerate、ease、bounce、cubic等。当然Flutter提供的不满足需求的话,也可以自定义插值器。
Tween
线性估值器。Flutter还封装定义了不同类型的估值器:
- ReverseTween
- ColorTween
- SizeTween
- RectTween
- IntTween
- StepTween
- ConstantTween