Flutter双击点赞功能插件tiktok_double_tap_like的使用

Flutter双击点赞功能插件tiktok_double_tap_like的使用

tiktok_double_tap_like

TikTok Double Tap Like

关于

TikTok Double Tap Like 是一个 Flutter 包，它提供了一个可以用于通过双击视频来点赞的功能，就像在 TikTok 中一样。

示例

tiktok_double_tap_like 
DoubleTapLikeWidget(
  onLike: (likeCount) {
    // 当用户双击时执行的操作
  },
  likeWidget: const Image(image: AssetImage('assets/icons/heart.png')),
  likeWidth: 200,
  likeHeight: 200,
  child: VideoPlayer(),
)

备注

  • 你需要提供一个当用户双击屏幕时将要显示的小部件，无论是 Text、Icon 等。你可以使用 likeWidget 属性来提供该小部件。

  • 你也可以通过 likeWidth 和 likeHeight 属性提供小部件的宽度和高度。默认值均为 200。

  • 在 onLike 回调函数中有一个 likeCount 参数，如果你想知道用户点赞了多少次视频，可以使用这个参数。

  • 这个插件非常高效且性能良好。我明确地使用了 AnimationController、Animation、Tween 和 AnimatedBuilder 来创建动画。此外，还实现了一种机制来移除屏幕上添加的心形图标。

帮助我

如果你喜欢这个包，可以在 Buy Me A Coffee 上支持我。

完整示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TikTok Double Tap Like',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return DoubleTapLikeWidget(
      onLike: (likeCount) {
        // 当用户双击时执行的操作
      },
      likeWidget: const Image(image: AssetImage('assets/icons/heart.png')),
      likeWidth: 200,
      likeHeight: 200,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('TikTok Double Tap Like'),
        ),
        body: Center(
          child: Text('Double tap to like!'),
        ),
      ),
    );
  }
}

更多关于Flutter双击点赞功能插件tiktok_double_tap_like的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter双击点赞功能插件tiktok_double_tap_like的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用tiktok_double_tap_like插件来实现双击点赞功能的代码示例。首先，确保你已经在pubspec.yaml文件中添加了该插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  tiktok_double_tap_like: ^最新版本号  # 请替换为实际的最新版本号

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

接下来，在你的Flutter项目中，你可以按照以下步骤来实现双击点赞功能：

  1. 导入插件：

    在你的Dart文件中导入tiktok_double_tap_like插件。

    import 'package:tiktok_double_tap_like/tiktok_double_tap_like.dart';

  2. 定义点赞状态：

    在你的State类中定义一个变量来跟踪点赞状态。

    class _MyHomePageState extends State<MyHomePage> {
  bool isLiked = false;
}

  3. 构建UI并添加双击监听：

    使用TikTokDoubleTapLike包装你想要添加双击点赞功能的组件，并设置相关回调。

    [@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Double Tap Like Example'),
    ),
    body: Center(
      child: TikTokDoubleTapLike(
        child: GestureDetector(
          onTap: () {
            // 单击事件（可选）
          },
          child: Image.network(
            'https://example.com/your_image_url.jpg', // 替换为你的图片URL
            fit: BoxFit.cover,
          ),
        ),
        isLiked: isLiked,
        likeBuilder: (context, isLiked, likeController) {
          return IconButton(
            icon: Icon(
              isLiked ? Icons.favorite : Icons.favorite_border,
              color: isLiked ? Colors.red : Colors.grey,
            ),
            onPressed: () {
              // 这里不需要处理点击事件，因为TikTokDoubleTapLike已经处理了双击逻辑
            },
          );
        },
        onLike: () {
          setState(() {
            isLiked = !isLiked;
          });
        },
      ),
    ),
  );
}

在这个示例中，TikTokDoubleTapLike组件包装了一个GestureDetector，后者包含一个图片。isLiked变量用于跟踪当前的点赞状态。likeBuilder参数允许你自定义点赞图标的显示逻辑，onLike回调则在双击事件发生时被调用，用于更新点赞状态。

注意，TikTokDoubleTapLike组件已经处理了双击逻辑，所以你不需要在GestureDetector的onTap回调中处理双击事件。

确保你根据实际需求调整图片URL和其他UI元素。希望这个示例能帮到你！

回到顶部