基于like_button库实现容器双击触发爱心动画（动态设置）

你不需要寻找like_button库的分叉版本，通过GlobalKey获取LikeButton的内部状态，就能实现双击容器触发爱心动画的效果，具体步骤如下：

1. 给LikeButton添加GlobalKey<LikeButtonState>，用于获取按钮的内部状态
2. 用GestureDetector包裹需要双击触发的容器，在onDoubleTap回调中调用LikeButton的点击逻辑，触发动画

修改后的完整代码 #

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

class LikeAnimationWidget extends StatefulWidget {
  @override
  _LikeAnimationWidgetState createState() => _LikeAnimationWidgetState();
}

class _LikeAnimationWidgetState extends State<LikeAnimationWidget> {
  bool liked = false;
  // 定义GlobalKey用于获取LikeButton的状态
  final GlobalKey<LikeButtonState> _likeButtonKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        SizedBox(height: 100),
        // 用GestureDetector包裹容器，监听双击事件
        GestureDetector(
          onDoubleTap: () async {
            // 调用LikeButton的onTap回调，触发动画和状态切换
            final newState = await _likeButtonKey.currentState?.onTap!(liked);
            if (newState != null) {
              setState(() {
                liked = newState;
              });
            }
          },
          child: Container(
            width: 300,
            height: 300,
            color: Colors.grey[100],
            alignment: Alignment.center,
            // 嵌套原有的LikeButton，绑定GlobalKey
            child: LikeButton(
              key: _likeButtonKey,
              onTap: (bool isLiked) async {
                return !isLiked;
              },
              isLiked: liked,
              size: 200,
              circleColor:
                  CircleColor(start: Color(0xff00ddff), end: Color(0xff0099cc)),
              bubblesColor: BubblesColor(
                dotPrimaryColor: Color(0xff33b5e5),
                dotSecondaryColor: Color(0xff0099cc),
              ),
              likeBuilder: (bool isLiked) {
                return Icon(
                  Icons.favorite,
                  color: isLiked ? Colors.deepPurpleAccent : Colors.grey,
                  size: 50,
                );
              },
              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;
              },
            ),
          ),
        ),
      ],
    );
  }
}

原理说明 #

• 通过GlobalKey可以直接访问LikeButton的内部状态LikeButtonState
• 在双击回调中调用LikeButton的onTap方法，会触发库内置的爱心动画、气泡动画以及状态切换逻辑，完全复用原库的动画效果
• 无需修改原库源码，也不需要使用分叉版本，代码侵入性极低

内容的提问来源于stack exchange，提问作者Cidiko Andorem