Flutter点赞功能插件many_like的使用

Flutter点赞功能插件many_like的使用

many_like 是一个纯Flutter编写的类似于TikTok点赞按钮的组件。它允许用户自定义动画和组件。

点赞按钮 💖

  • 支持自定义动画 🚀
  • 支持自定义组件 📦

ROADMAP 🗺

  • 0.1.0
    • ❌ 使用Canvas绘制
    • ❌ 添加全局配置

Getting Started

首先，确保已经在 pubspec.yaml 文件中添加了 many_like 插件：

dependencies:
  many_like: ^版本号

然后在你的项目中导入并使用它。

完整示例Demo

以下是一个完整的示例，展示了如何在Flutter应用中使用 many_like 组件。

import 'package:flutter/material.dart';
import 'package:many_like/many_like.dart'; // 导入many_like插件

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

class MyApp extends StatelessWidget {
  // 这个widget是你的应用的根组件
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'many_like_demo',
      home: HomePage(), // 设置HomePage为启动页面
    );
  }
}

class HomePage extends StatefulWidget {
  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool isLiked = false; // 是否已点赞

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('many_like Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ManyLike( // 使用ManyLike组件
              liked: isLiked, // 当前是否已点赞
              onToggle: (bool value) { // 点击时触发的回调
                setState(() {
                  isLiked = value; // 更新状态
                });
              },
              likeSize: 60.0, // 点赞图标大小
              likeColor: Colors.red, // 点赞图标的颜色
              unLikeColor: Colors.grey, // 未点赞时图标的颜色
              duration: Duration(seconds: 1), // 动画持续时间
            ),
            SizedBox(height: 20),
            Text(isLiked ? '已点赞' : '未点赞'), // 显示当前点赞状态
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然，下面是一个关于如何使用Flutter中的many_like插件来实现点赞功能的代码示例。many_like插件可以帮助你快速集成一个功能齐全且可自定义的点赞按钮。

首先，你需要在你的pubspec.yaml文件中添加many_like依赖：

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

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

接下来是一个简单的使用示例：

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int likeCount = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Many Like Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ManyLike(
              count: likeCount,
              onLike: () {
                setState(() {
                  likeCount++;
                });
              },
              onUnlike: () {
                setState(() {
                  if (likeCount > 0) {
                    likeCount--;
                  }
                });
              },
              isLiked: likeCount > 0,
              likeBuilder: (context, isLiked, count, onLike, onUnlike) {
                return IconButton(
                  icon: Icon(
                    isLiked ? Icons.thumb_up_alt_outlined : Icons.thumb_down_alt_outlined,
                    color: isLiked ? Colors.red : Colors.grey,
                  ),
                  onPressed: isLiked ? onUnlike : onLike,
                );
              },
              countBuilder: (context, count) {
                return Text('$count', style: TextStyle(fontSize: 18, color: Colors.black));
              },
            ),
            SizedBox(height: 20),
            Text('当前点赞数: $likeCount'),
          ],
        ),
      ),
    );
  }
}

代码说明：

  1. 添加依赖：在pubspec.yaml中添加many_like依赖。

  2. 导入包：在Dart文件中导入many_like包。

  3. 创建UI：

    • 使用ManyLike组件来显示点赞按钮和计数。
    • count：当前点赞数。
    • onLike：当用户点击点赞时的回调。
    • onUnlike：当用户取消点赞时的回调。
    • isLiked：当前是否已点赞。
    • likeBuilder：自定义点赞按钮的UI。
    • countBuilder：自定义点赞数的UI。

  4. 状态管理：使用setState方法来更新点赞数，并触发UI刷新。

注意事项：

  • 确保你使用的是many_like插件的最新版本，以避免可能的bug和兼容性问题。
  • 你可以根据需求进一步自定义likeBuilder和countBuilder中的UI。

这样，你就可以在你的Flutter应用中快速集成并使用点赞功能了。

回到顶部