Flutter触摸涟漪效果插件flutter_touch_ripple的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter触摸涟漪效果插件flutter_touch_ripple的使用

简介

flutter_touch_ripple 是一个Flutter插件，允许开发者自定义大部分行为和动画，并且具有优秀的性能。这个插件可以控制触摸涟漪效果。

事件类型

事件类型 描述 ♾️ 异步 ♻️ 连续
Tap 用户点击或单击时调用 🟢 🔴
Double Tap 用户双击或双击时调用 🔴 🟢
Long Tap 用户长按或长按时调用 🔴 🟢
Drag(V, H) 不支持 🟡 🟡

使用方法

如何应用涟漪效果？

当用户点击或单击时调用。

TouchRipple(
  onTap: () => print("Hello, World!"),
  child: ... // <- 这是你的widget
)

如何执行异步任务？

TouchRipple<String>(
    onTapAsync: () async {
        return await Future.delayed(const Duration(milliseconds: 500), () {
            return "end";
        });
    },
    onTapAsyncStart: () => print("start"),
    onTapAsyncEnd: print,
    // ... skip
);

如何全局定义样式？

TouchRippleStyle 定义其后代触摸涟漪小部件的样式，类似于 PrimaryScrollController 定义其后代小部件的控制器。

TouchRippleStyle(
  rippleColor: Colors.blue.withAlpha(50),
  rippleBorderRadius: BorderRadius.circular(10),
  overlapBehavior: TouchRippleOverlapBehavior.ignore,
  cancelBehavior: TouchRippleCancelBehavior.none,
  onlyMainButton: false,
  tapBehavior: TouchRippleBehavior(...),
  child: ...
),

示例代码

以下是一个完整的示例demo，展示如何使用 flutter_touch_ripple 插件：

import 'package:flutter/material.dart';
import 'package:flutter_touch_ripple/flutter_touch_ripple.dart';

void main() {
  runApp(const RootApp());
}

class RootApp extends StatelessWidget {
  const RootApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Touch Ripple Example'),
        ),
        body: Center(
          child: TouchRipple(
            // Called when the user taps or clicks.
            onTap: () => print("Hello, Tap!"),
            onDoubleTap: () => print("Hello, Double Tap!"),
            onLongTap: () => print("Hello, Long Tap!"),
            rippleColor: Colors.blue.withAlpha(50),
            rippleBorderRadius: BorderRadius.circular(10),
            child: const Padding(
              padding: EdgeInsets.all(20),
              child: Text("Hello, World!", style: TextStyle(fontSize: 32)),
            ),
          ),
        ),
      ),
    );
  }
}

属性介绍

TouchRipple 提供了丰富的属性来定制触摸涟漪效果，以下是部分属性列表：

  • onTap: 用户点击或单击时调用。
  • onTapAsync: 用户点击或单击时调用，但此函数确保在异步操作完成之前触摸涟漪效果保持可见并防止在此期间的额外事件。
  • rippleColor: 涟漪效果的背景颜色。
  • rippleBorderRadius: 涟漪效果的边框圆角实例。
  • overlapBehavior: 触摸涟漪与其他涟漪效果重叠时的行为。

更多详细信息请参考官方文档和示例代码。

通过这些配置，您可以轻松地为您的Flutter应用添加漂亮的触摸涟漪效果，并根据需要进行自定义。希望这篇帖子能帮助您更好地理解和使用 flutter_touch_ripple 插件。


更多关于Flutter触摸涟漪效果插件flutter_touch_ripple的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter触摸涟漪效果插件flutter_touch_ripple的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用flutter_touch_ripple插件来实现触摸涟漪效果的代码案例。

首先，确保你已经在pubspec.yaml文件中添加了flutter_touch_ripple依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_touch_ripple: ^x.y.z  # 替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter应用中使用flutter_touch_ripple。以下是一个简单的示例，展示如何在一个按钮上应用触摸涟漪效果：

import 'package:flutter/material.dart';
import 'package:flutter_touch_ripple/flutter_touch_ripple.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Ripple Effect Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: RippleEffectDemo(),
    );
  }
}

class RippleEffectDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ripple Effect Demo'),
      ),
      body: Center(
        child: RippleButton(
          onPressed: () {
            print('Button pressed!');
          },
          child: Container(
            width: 200,
            height: 50,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(25),
            ),
            child: Center(
              child: Text(
                'Press Me',
                style: TextStyle(color: Colors.white, fontSize: 18),
              ),
            ),
          ),
          rippleColor: Colors.grey.withOpacity(0.5), // 涟漪颜色
          borderRadius: BorderRadius.circular(25), // 圆角
        ),
      ),
    );
  }
}

// 自定义RippleButton，封装RippleEffect
class RippleButton extends StatelessWidget {
  final VoidCallback onPressed;
  final Widget child;
  final Color rippleColor;
  final BorderRadius borderRadius;

  const RippleButton({
    Key? key,
    required this.onPressed,
    required this.child,
    this.rippleColor = Colors.white30,
    this.borderRadius = BorderRadius.zero,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return RippleEffect(
      onTap: onPressed,
      rippleColor: rippleColor,
      borderRadius: borderRadius,
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          borderRadius: borderRadius,
          onTap: onPressed,
          child: child,
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个自定义的RippleButton组件，它封装了RippleEffect和InkWell。RippleEffect是flutter_touch_ripple插件提供的一个widget，用于创建触摸涟漪效果。

注意：RippleEffect组件的onTap回调和子组件的InkWell的onTap回调是同一个，这是为了确保点击事件能够正确触发。不过在实际使用中，你可能只需要一个onTap回调。

这个示例展示了如何在按钮上应用涟漪效果，并且你可以通过调整rippleColor和borderRadius来自定义涟漪的颜色和圆角。

希望这个示例对你有帮助！

回到顶部