Flutter的触摸涟漪效果
Flutter小部件的可自定义触摸涟漪效果
这款Flutter包允许开发者自定义大部分行为和动画，具有出色的性能和可外部控制的触摸效果包。
总而言之，使用此包可以轻松定义灵活的触摸行为或触摸动画。
视图 (View)
如何应用涟漪小部件
请参考此代码！
TouchRipple(
onTap: () => print('Hello World!'),
child: ... // <- this your widget!
),
参考适当的代码，使用此代码实现页面移动
TouchRipple(
onTap: () {
HapticFeedback.selectionClick();
onTap?.call();
},
// or behavior
tapBehavior: const TouchRippleBehavior(
// "The spread animation must complete in order for the registered
// event callback function to be called." which is equivalent to defining
eventCallBackableMinPercent: 1,
),
);
应用 eventCallBackableMinPercent = 1
当将上述 [TouchRippleBehavior] 的参数 *eventCallBackableMinPercent* 设置为 1 时，我们可以实现触摸涟漪效果完成后移动页面的行为。
TouchRipple 小部件的属性
| 属性 | 描述 | 默认值 | 类型 |
|---|---|---|---|
| child | [TouchRipple] 小部件包含的 [child] 小部件。 | 必需 | Widget |
| onTap | 定义用户点击该小部件时调用的函数。 | 空 | TouchRippleEventCallBack |
| onDoubleTap | 定义用户双击该小部件时调用的函数。 | 空 | TouchRippleEventCallBack |
| onDoubleTapContinuableChecked | … | 空 | TouchRippleContinuableCheckedCallBack |
| onDoubleTapStart | 定义双击事件发生并进入双击状态时调用的函数。 | 空 | TouchRippleStateCallBack |
| onDoubleTapEnd | 定义双击事件触发且双击状态结束时调用的函数。 | 空 | TouchRippleStateCallBack |
| onLongTap | 定义用户长按该小部件时调用的函数。 | 空 | TouchRippleContinuableCheckedCallBack |
| onLongTapStart | 定义长按事件发生并进入长按状态时调用的函数。 | 空 | TouchRippleStateCallBack |
| onLongTapEnd | 定义长按事件触发且长按状态结束时调用的函数。 | 空 | TouchRippleStateCallBack |
| onHoverStart | 定义悬停事件发生并进入悬停状态时调用的函数。 | 空 | TouchRippleStateCallBack |
| onHoverEnd | 定义悬停状态结束时调用的函数。 | 空 | TouchRippleStateCallBack |
| onFocusStart | 定义当过渡到焦点状态时调用的回调函数。焦点状态是手势可以继续检测和处理指针的状态。例如，双击状态可以定义为小部件继续检测指针并持续定义手势的状态。 | 空 | TouchRippleStateCallBack |
| onFocusEnd | 定义焦点状态结束时调用的回调函数。焦点状态是手势可以继续检测和处理指针的状态。例如，双击状态可以定义为小部件继续检测指针并持续定义手势的状态。 | 空 | TouchRippleStateCallBack |
| behavior | 定义触摸涟漪所有事件的默认行为。另请参阅：如果未在点击、双击或长按事件中定义行为，则将其定义为该行为定义的值。 | 空 | TouchRippleBehavior |
| tapBehavior | 定义发生点击事件时应用的的行为。 | 空 | TouchRippleBehavior |
| doubleTapBehavior | 定义发生双击事件时应用的的行为。 | 空 | TouchRippleBehavior |
| longTapBehavior | 定义发生长按事件时应用的的行为。 | 空 | TouchRippleBehavior |
| isDoubleTapContinuable | 定义是否允许连续双击。 | 真 | 布尔值 |
| isLongTapContinuable | 定义是否允许连续长按。 | 真 | 布尔值 |
| rejectBehavior | 定义触摸涟漪根据指针位置拒绝的行为。 | TouchRippleRejectBehavior.leave | TouchRippleRejectBehavior |
| cancelledBehavior | 定义导致手势被取消的行为。 | TouchRippleCancelledBehavior.none | TouchRippleCancelledBehavior |
| longTapFocusStartEvent | … | TouchRippleLongTapFocusStartEvent.onRejectable | TouchRippleLongTapFocusStartEvent |
| rippleColor | 定义所有事件的触摸涟漪背景颜色。 | getter defaultRippleColor | 颜色 |
| hoverColor | 定义鼠标悬停时显示的悬停效果的背景颜色。 | 空 | 颜色 |
| hoverFadeInDuration | 定义悬停动画的淡入持续时间。 | 空 | 持续时间 |
| hoverFadeInCurve | 定义悬停曲线动画的淡入曲线。 | 空 | Curve |
| hoverFadeOutDuration | 定义悬停动画的淡出持续时间。 | 空 | 持续时间 |
| hoverFadeOutCurve | 定义悬停曲线动画的淡出曲线。 | 空 | Curve |
| rippleScale | 定义触摸涟漪效果尺寸的缩放比例。 | 1 | double (1~max) |
| tapableDuration | [tapableDuration] 定义指针按下事件发生后，点击事件取消之前等待的时间。换句话说，为了检测到点击并发生点击事件，点击事件必须在 [tapableDuration] 之前发生。 | 空 | 持续时间 |
| renderOrder | 定义触摸涟漪效果的绘制顺序。 | TouchRippleRenderOrderType.foreground | TouchRippleRenderOrderType |
| hitTestBehavior | [RawGestureDetector] 的 [HitTestBehavior] 相同。 | HitTestBehavior.translucent | HitTestBehavior |
| doubleTappableDuration | 被视为双击的两次点击之间的持续时间。这指的是用于识别双击的时间间隔。如果发生一次点击，并且在 [doubleTappableDuration] 之前再次发生点击，则视为双击。 | const Duration(milliseconds: 250) | 持续时间 |
| doubleTapHoldDuration | 定义双击状态结束的最短持续时间。如果双击状态开始，并且在该持续时间内没有发生点击事件，则双击状态结束。 | 空 | 持续时间 |
| longTappableDuration | 定义被视为长按的最短持续时间。另请参阅：如果指针按下事件发生并且经过 [longTappableDuration] 或更长的时间，则该事件被定义为长按。如果未定义值，则替换为长按行为的展开持续时间。 | const Duration(milliseconds: 750) | 持续时间 |
| longTapStartDeleyDuration | 定义在长按手势被视为已启动之前必须经过的持续时间。另请参阅：例如，如果该值定义为 500 毫秒，则直到用户按住小部件至少 500 毫秒，长按操作才被视为已启动。 | const Duration(milliseconds: 150) | 持续时间 |
| tapPreviewMinDuration | 在显示预览点击效果之前等待的最短持续时间，如果没有其他事件需要考虑。 | const Duration(milliseconds: 150) | 持续时间 |
| 控制器 | 当您需要从外部管理触摸涟漪效果时，这是您定义控制器。 | 空 | TouchRippleController |
| borderRadius | [ClipRRect] 的 [BorderRadius] 相同。 | BorderRadius.zero | TouchRippleController |
| hoverCursor | 定义鼠标悬停时可见的鼠标光标。 | SystemMouseCursors.click | SystemMouseCursor |
| hoverColorRelativeOpacity | 定义当没有人工定义悬停颜色时，默认悬停颜色的涟漪颜色不透明度百分比。 | 0.4 | 双精度 |
| focusColorRelativeOpacity | 定义当没有人工定义焦点颜色时，默认焦点颜色的涟漪颜色不透明度百分比。 | 0.4 | 双精度 |
| useHoverEffect | 定义是否在整个过程中使用悬停效果。 | 真 | 布尔值 |
| useFocusEffect | 定义是否在整个过程中使用焦点效果。 | 真 | 布尔值 |
| focusColor | 定义焦点时发生的焦点效果的背景颜色。 | 空 | 颜色 |
| focusFadeInDuration | 定义焦点动画的淡入持续时间。 | const Duration(milliseconds: 150) | 持续时间 |
| focusFadeInCurve | 定义焦点曲线动画的淡入曲线。 | Curves.easeOut | Curve |
| focusFadeOutDuration | 定义焦点动画的淡出持续时间。 | 空 | 持续时间 |
| focusFadeOutCurve | 定义焦点曲线动画的淡出曲线。 | 空 | Curve |
| useDoubleTapFocusEffect | 定义在双击状态下是否使用焦点效果。 | 真 | 布尔值 |
| useLongTapFocusEffect | 定义在长按状态下是否使用焦点效果。 | 真 | 布尔值 |
| isOnHoveredDisableFocusEffect | 定义在悬停状态下是否禁用焦点效果。 | 假 | 布尔值 |
TouchRippleBehavior 的属性
另请参阅：由于这些值非常灵活且与其他值相互作用，因此我们无法记录默认值。
| 属性 | 描述 | 类型 |
|---|---|---|
| overlap | 定义效果重叠时的行为。 | TouchRippleOverlapBehavior |
| lowerPercent | 以 0 到 1 的十进制形式定义触摸涟漪效果的展开动画何时开始。 | double (0~1) |
| upperPercent | 以 0 到 1 的十进制形式定义触摸涟漪效果的展开动画何时结束。 | double (0~1) |
| fadeLowerPercent | 以 0 到 1 的十进制形式定义触摸涟漪效果的淡入动画何时开始。 | double (0~1) |
| fadeUpperPercent | 以 0 到 1 的十进制形式定义触摸涟漪效果的淡入动画何时结束。 | double (0~1) |
| eventCallBackableMinPercent | 定义注册的事件回调函数可以在触摸涟漪效果展开动画的哪个点被调用。例如，如果用户即将单击以移动页面，您不希望在效果完全展开之前调用事件回调函数，从而导致页面移动。 | 双精度 |
| spreadDuration | 定义触摸涟漪展开动画的持续时间。 | 持续时间 |
| spreadCurve | 定义触摸涟漪展开曲线动画的曲线。 | Curve |
| fadeInDuration | 定义触摸涟漪淡入动画的淡入持续时间。 | 持续时间 |
| fadeInCurve | 定义触摸涟漪淡入曲线动画的淡入曲线。 | Curve |
| fadeOutDuration | 定义触摸涟漪淡出动画的淡出持续时间。 | 持续时间 |
| fadeOutCurve | 定义触摸涟漪淡出曲线动画的淡出曲线。 | Curve |
| canceledDuration | 定义当触摸涟漪重叠行为中断触摸涟漪效果时，该效果淡出的持续时间。 | 持续时间 |
| canceledDuration | 定义当触摸涟漪重叠行为中断触摸涟漪效果时，该效果淡出的持续时间。 | 持续时间 |
| canceledCurve | 定义当触摸涟漪效果被触摸涟漪重叠行为中途取消时，淡出曲线动画的曲线。 | Curve |
TouchRippleOverlapBehavior 的值
此枚举用于定义触摸涟漪重叠时的行为。
| 属性 | 描述 |
|---|---|
| overlappable | 定义触摸涟漪应重叠。 |
| cancel | 如果效果重叠，则取消之前的触摸效果，并将应添加到堆栈的元素添加进去。 |
| ignoring | 如果效果重叠，则忽略并取消事件，直到之前的触摸效果消失。 |
应用 TouchRippleRejectBehavior.overlappable
应用 TouchRippleRejectBehavior.cancel
应用 TouchRippleRejectBehavior.ignoring
TouchRippleRejectBehavior 的值
此枚举定义了手势被拒绝的行为。
| 属性 | 描述 |
|---|---|
| touchSlop | 一旦检测到指针，如果指针移动距离大于或等于 [kTouchSlop]，则取消事件。 |
| leave | 一旦检测到指针，如果指针位置超出了小部件所占用的位置，则取消事件。 |
应用 TouchRippleRejectBehavior.touchSlop
应用 TouchRippleRejectBehavior.leave
TouchRippleCancelledBehavior 的值
此枚举定义了手势被取消时的任务。
| Value | 描述 |
|---|---|
| 无 | 手势被取消时不会执行任何特定任务。 |
| stopSpread | 手势取消时，触摸涟漪效果的展开动画被停止。 |
| reverseSpread | 手势取消时，触摸涟漪效果的展开动画被反转。 |
应用 TouchRippleCancelBehavior.none
应用 TouchRippleCancelBehavior.stopSpread
应用 TouchRippleCancelBehavior.reverseSpread
TouchRippleLongTapFocusStartEvent 的值
| Value | 描述 |
|---|---|
| onContinueStart | 当处于可继续状态时，被认为是处于焦点状态。 |
| onRejectable | 定义是否为长按的状态被认为是焦点状态。 |
应用 TouchRippleCancelBehavior.onContinueStart
应用 TouchRippleCancelBehavior.onRejectable
TouchRippleRenderOrderType 的值
此枚举用于定义触摸涟漪效果的渲染顺序。
| Value | 描述 |
|---|---|
| foreground | 此值定义触摸涟漪应渲染在其他元素的前面。 |
| background | 此值定义触摸涟漪应渲染在其他元素的后面。 |
应用 TouchRippleCancelBehavior.foreground
应用 TouchRippleCancelBehavior.background
