Flutter 仿掘金推特点赞按钮

栏目: IOS · 发布时间: 5年前

内容简介:做这个按钮的起因是,产品突然说要改一下点赞效果,像下面这样。但是我心中的审美不是这样的,不可以,坚决不行。 想起来群花拉面写过一个

like_button

做这个按钮的起因是,产品突然说要改一下点赞效果,像下面这样。

但是我心中的审美不是这样的,不可以,坚决不行。 想起来群花拉面写过一个 用Flutter实现一个仿Twitter的点赞效果 .

看了下代码, 站在大佬们的肩膀 jd-alexander and 吉原拉面 ,把代码魔改了一下,开源真香,并且添加了点赞数字动画。

把效果给产品看了一下

Flutter 仿掘金推特点赞按钮

直接让产品改变主意,这个效果好,全平台都改。。。

Flutter 仿掘金推特点赞按钮

怎么使用

如果什么都不设置,默认是Icons.favorite的效果

LikeButton(),
复制代码

当然你也可以自定义一些东西

LikeButton(
               size: buttonSize,
               circleColor:
                   CircleColor(start: Color(0xff00ddff), end: Color(0xff0099cc)),
               bubblesColor: BubblesColor(
                 dotPrimaryColor: Color(0xff33b5e5),
                 dotSecondaryColor: Color(0xff0099cc),
               ),
               likeBuilder: (bool isLiked) {
                 return Icon(
                   Icons.home,
                   color: isLiked ? Colors.deepPurpleAccent : Colors.grey,
                   size: buttonSize,
                 );
               },
               likeCount: 665,
               countBuilder: (int count, bool isLiked, String text) {
                 var color = isLiked ? Colors.deepPurpleAccent : Colors.grey;
                 Widget result;
                 if (count == 0) {
                   result = Text(
                     "love",
                     style: TextStyle(color: color),
                   );
                 } else
                   result = Text(
                     text,
                     style: TextStyle(color: color),
                   );
                 return result;
               },
             ),
复制代码

下面是参数的介绍

参数 描述 默认
size 点赞Widget的大小 30.0
animationDuration isLiked变化动画的时间长度 const Duration(milliseconds: 1000)
bubblesSize 大小泡泡的最外圈的大小 size * 2.0
bubblesColor 泡泡的颜色,由4个颜色组成 const BubblesColor(dotPrimaryColor: const Color(0xFFFFC107),dotSecondaryColor: const Color(0xFFFF9800),dotThirdColor: const Color(0xFFFF5722),dotLastColor: const Color(0xFFF44336),)
circleSize 动画时候的圈圈的最终大小 size * 0.8
circleColor 动画时候的圈圈的颜色,有开始颜色和结束颜色组成 const CircleColor(start: const Color(0xFFFF5722), end: const Color(0xFFFFC107)
onTap 点击按钮回调 你可以在这里处理请求,改变数据
isLiked 是否喜欢 false
likeCount 喜欢数量,如果未null的话,不显示likeCount部分 null
mainAxisAlignment MainAxisAlignment值,like_button是由Row组成的 MainAxisAlignment.center
likeBuilder 生成like widget的回调,返回值为Widget,可以根据isLiked,来生成不同样式的UI null
countBuilder 生成count widget的回调,返回值为Widget,可以根据isLiked/likeCount,来生成不同样式的UI null
likeCountAnimationDuration likeCount变化动画的时间长度 const Duration(milliseconds: 500)
likeCountAnimationType likeCount动画的类型。none没有动画;part动画只作用在变化的部分;all动画作用在整个数字上 LikeCountAnimationType.part
likeCountPadding likeCount widget的padding const EdgeInsets.only(left: 3.0)

在什么时候去通知服务端,更新数据

在点击的时候,注册onTap回调。

如果你请求成功,返回成功的isLiked值;

如果失败了,请返回null,这样ui就不会变化,建议这个时候Toast告知一下。

LikeButton(
                onTap: (bool isLiked) 
                {
                  return onLikeButtonTap(isLiked, item);
                  },)
复制代码
Future<bool> onLikeButtonTap(bool isLiked, TuChongItem item) {
    ///send your request here
    ///
    final Completer<bool> completer = new Completer<bool>();
    Timer(const Duration(milliseconds: 200), () {
      item.is_favorite = !item.is_favorite;
      item.favorites =
          item.is_favorite ? item.favorites + 1 : item.favorites - 1;

      // if your request is failed,return null,
      completer.complete(item.is_favorite);
    });
    return completer.future;
  }
复制代码

最后放上 like_button ,如果你有什么不明白或者对这个方案有什么改进的地方,请告诉我,欢迎加入 Flutter Candies ,一起生产可爱的Flutter 小糖果(QQ群:181398081)

最最后放上 Flutter Candies 全家桶,真香。

Flutter 仿掘金推特点赞按钮

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数据压缩导论(第4版)

数据压缩导论(第4版)

[美] Khalid Sayood / 贾洪峰 / 人民邮电出版社 / 2014-1 / 129.00

数据压缩已经成为信息革命的一门支撑技术,这场革命已经改变了我们的生活,而在此过程中,数据压缩也变得几乎无处不在。从MP3播放器到智能手机,再到数字电视和数字电影,数据压缩几乎成了所有信息技术的必备要素。 近年来,以大数据为标志的互联网技术高歌猛进。数据规模大、产生速度快、来源多样等特性,导致数据存储和处理都前所未有地复杂。《数据压缩导论(第4版)》作为迄今为止数据压缩领域最全面而深入的著作,......一起来看看 《数据压缩导论(第4版)》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

html转js在线工具
html转js在线工具

html转js在线工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换