【Flutter组件】仿抖音双击点赞弹出爱心效果(可连点)

该博客介绍了如何在Flutter中创建一个仿抖音的双击点赞功能,包括单击暂停、双击显示爱心动画,并提供了完整的代码示例。代码完全使用Flutter内建组件,不依赖外部库,易于复制和修改。
摘要由CSDN通过智能技术生成

效果

screen.png

简介

仿抖音点赞手势,单击暂停,双击点赞,可连续点击添加多个爱心,特点如下

  1. 全部效果为代码绘制(爱心图标来自Material Icon的图标)
  2. 套上在目标Widget外即可使用
  3. 提供单击与点赞的回调
  4. 建议复制代码使用,动画可按需修改
  5. 没有flutter之外的依赖项,可复制使用(懒得发pub)

基本原理

一个罩在child上的stack层,双击后根据坐标添加目标爱心Widget,爱心Widget在出现时会播放动画,用坐标作为key,动画结束后移除已经消失的爱心。

全部代码

什么都不依赖,可以直接复制使用。

import 'dart:async';
import 'dart:math';

import 'package:flutter/material.dart';

/// 视频手势封装
/// 单击:暂停
/// 双击:点赞,双击后再次单击也是增加点赞爱心
class TikTokVideoGesture extends StatefulWidget {
  const TikTokVideoGesture({
    Key key,
    @required this.child,
    this.onAddFavorite,
    t
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
基于 Flutter 3.x 进行仿抖音跨平台混合开发,是一种使用最新版本的Flutter框架来开发类似抖音的应用程序的方法。 Flutter是一种跨平台的开发框架,可以让开发者使用同一套代码同时在iOS和Android平台上构建高性能的应用程序。它提供了丰富的UI组件和工具,使开发过程更加简单和高效。 要实现仿抖音的跨平台混合开发,首先需要对抖音的功能和界面进行分析和设计。然后,使用Flutter框架来实现这些功能和界面。 Flutter提供了丰富的UI组件,如按钮、文本、图片、视频播放等,可以用于构建抖音的各种界面元素。开发者可以使用Dart语言来编写业务逻辑,同时可以使用Flutter提供的hot reload功能实时预览和调试应用程序。 为了实现跨平台开发,开发者可以使用Flutter的多平台支持。Flutter可以生成原生的iOS和Android应用程序,以及Web和桌面应用程序。这使得开发者可以在不同的平台上发布和部署仿抖音的应用程序。 在开发过程中,开发者可以使用Flutter的插件来集成各种第三方功能和服务,如视频播放、数据存储、社交分享等。这些插件可以帮助开发者更加方便地实现仿抖音的各种功能。 总之,基于Flutter 3.x进行仿抖音跨平台混合开发,是一种高效、灵活的开发方法。通过使用Flutter框架和相关工具,开发者可以快速构建功能完善、界面精美的仿抖音应用程序,并在多个平台上进行发布和部署。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值