Flutter 的触摸涟漪效果

? Flutter 小部件的可定制触摸涟漪效果

这个 Flutter 包允许开发者自定义大部分行为和动画，拥有出色的性能，并且触摸效果包可以通过外部控制，具有随机性。

总而言之，使用这个包可以轻松定义灵活的触摸行为或触摸动画。

视图 (View)

ezgif-3-055c1741ca

如何应用涟漪小部件

请参考此代码！

TouchRipple(
    onTap: () => print('Hello World!'),
    child: ... // <- this your widget!
),

参考适当的代码，用此代码实现页面跳转

TouchRipple(
    onTap: () {
        HapticFeedback.selectionClick();
        onTap?.call();
    },
    // or behavior
    tapBehavior: const 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
cancelBehavior 定义导致手势被取消的行为。 TouchRippleCancelBehavior.none TouchRippleCancelBehavior
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 的值

此枚举定义了被拒绝手势的行为。

属性 描述
touchSlop 一旦检测到指针，如果指针移动距离大于或等于 [kTouchSlop]，则取消事件。
leave 一旦检测到指针，如果指针位置超出小部件占据的位置，则取消事件。

TouchRippleCancelBehavior 的值

此枚举定义了在手势被取消时执行的任务。

Value 描述
无 手势被取消时不会执行任何特定任务。
stopSpread 当手势被取消时，触摸涟漪效果的展开动画会停止。
reverseSpread 当手势被取消时，触摸涟漪效果的展开动画会被反转。

TouchRippleLongTapFocusStartEvent 的值

Value 描述
onContinueStart 当它处于可连续状态时，被认为处于焦点状态。
onRejectable 定义是否为长按的状态被视为焦点状态。

TouchRippleLongTapFocusStartEvent 的值

此枚举用于定义触摸涟漪效果的渲染顺序。

Value 描述
foreground 此值定义触摸涟漪应渲染在其他元素之前。
background 此值定义触摸涟漪应渲染在其他元素之后。

GitHub

查看 Github