Flutter轻松实现掘金点赞效果，助你APP脱颖而出！

Android

2023-09-04 09:00:43

Flutter中的掘金点赞效果：打造出众的用户体验

了解掘金点赞效果

掘金点赞效果已成为社交媒体和短视频应用程序中用户与内容互动的一种普遍方式。它为用户提供了一种简洁而令人愉悦的方式来表达他们的喜爱和支持。这种效果主要包括以下关键特征：

动画效果： 当用户点击点赞按钮时，会出现从按钮中心向外扩散的涟漪状动画，提供即时的视觉反馈。
点赞图标： 按钮通常采用心形图标，象征着用户对内容的喜爱和支持。
点赞计数： 按钮下方显示点赞总数，反映有多少用户赞了该内容。

使用Flutter实现掘金点赞效果

要使用Flutter实现掘金点赞效果，请遵循以下步骤：

1. 创建点赞按钮

使用Material Design图标按钮并设置其图标为心形来创建点赞按钮。

2. 添加动画效果

使用InkWell组件包裹点赞按钮，并在InkWell的onTap事件中添加一个动画控制器，用于控制动画效果。

3. 实现动画效果

在动画控制器的动画中，使用TweenAnimationBuilder创建一个动画效果，从按钮中心向外扩散一个圆形涟漪。

4. 更新点赞计数

在onTap事件中，更新点赞计数并在点赞按钮下方显示。

实例代码

以下代码示例演示了如何使用Flutter实现掘金点赞效果：

import 'package:flutter/material.dart';

class LikeButton extends StatefulWidget {
  const LikeButton({Key? key}) : super(key: key);

  @override
  _LikeButtonState createState() => _LikeButtonState();
}

class _LikeButtonState extends State<LikeButton> with SingleTickerProviderStateMixin {
  bool _isLiked = false;
  int _likeCount = 0;
  late AnimationController _animationController;

  @override
  void initState() {
    super.initState();

    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 200),
    );
  }

  @override
  void dispose() {
    _animationController.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        setState(() {
          _isLiked = !_isLiked;

          if (_isLiked) {
            _likeCount++;
          } else {
            _likeCount--;
          }
        });

        _animationController.forward();
      },
      child: Stack(
        alignment: Alignment.center,
        children: [
          AnimatedBuilder(
            animation: _animationController,
            builder: (context, child) {
              return Container(
                width: 60,
                height: 60,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: _isLiked ? Colors.red : Colors.transparent,
                ),
              );
            },
          ),
          const Icon(Icons.favorite, color: Colors.red, size: 24),
        ],
      ),
    );
  }
}