用 Flutter 来一颗跳动的心

2022 年 7 月 16 日
本文字数：1918 字
阅读完需：约 6 分钟

紫霞仙子：我在你心里留下了一样东西……
至尊宝：原来那个女孩子在我心里留下了一滴眼泪，我完全可以感受到当时她是多么的伤心。——《大话西游》

前言

引用的是《大话西游》的经典台词之一作为本篇的开头（里面的经典台词太多，数不过来👍🏻👍🏻👍🏻），这篇也算致敬一下星爷。昨天就开始在看 AnimatedPadding 的使用，感觉好像做动画没什么有趣的地方，自己折腾了一个类似水波的效果，但是效果不是很满意。然后，就突然想到了大话西游的那一段场景。

如果当时至尊宝能够看到他自己心里的紫霞仙子流的眼泪……可惜没有如果。

AnimatedPadding 介绍

AnimatedPadding 组件使用动画的方式调整其子组件与其父组件的内边距。通过调整内部边距可以改变子组件的尺寸，从而会有感觉子组件在放大缩小，例如下面的效果。

AnimatedPadding 的构造方法定义如下：

 AnimatedPadding({    Key? key,    required this.padding,    this.child,    Curve curve = Curves.linear,    required Duration duration,    VoidCallback? onEnd,  });

复制代码

与其他 AnimatedXX 组件一样，其实差别就在于多了一个 padding 参数，这个参数就是调节子组件和父组件之间的内边距的。

应用：一颗跳动的心

我们来简单地复刻一下紫霞仙子在至尊宝心里流泪的场景，效果如下：

其实就是两张图片用 Stack 组件堆叠，然后使用AnimatedPadding 调整爱心Stack 的内边距实现动画效果，这样就有心跳的效果了。这里为了实现反复动画，使用了 onEnd 回调来重启动画。源码如下：

class AnimatedPaddingDemo extends StatefulWidget {  AnimatedPaddingDemo({Key? key}) : super(key: key);
  @override  _AnimatedPaddingDemoState createState() => _AnimatedPaddingDemoState();}
class _AnimatedPaddingDemoState extends State<AnimatedPaddingDemo> {  final initialPadding = 60.0;  var padding;  final duration = 800;  bool started = false;  @override  void initState() {    padding = initialPadding;    super.initState();  }
  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('AnimatedPadding'),        brightness: Brightness.dark,        backgroundColor: Colors.black,      ),      backgroundColor: Colors.black,      body: Center(        child: Container(          width: 300.0,          height: 300.0,          child: AnimatedPadding(            padding: EdgeInsets.all(padding),            duration: Duration(milliseconds: duration),            curve: Curves.easeInCubic,            child: Stack(              alignment: Alignment.center,              children: [                Image.asset(                  'images/heart.png',                ),                ClipOval(                  child: Image.asset(                    'images/zixia.png',                    width: 60,                    height: 60,                    fit: BoxFit.fitHeight,                  ),                ),              ],            ),            onEnd: () {              if (started) {                setState(() {                  if (padding < initialPadding) {                    padding = initialPadding;                  } else {                    padding -= 20.0;                  }                });              }            },          ),        ),      ),      floatingActionButton: FloatingActionButton(        child:            Icon(started ? Icons.stop : Icons.play_arrow, color: Colors.white),        onPressed: () {          setState(() {            if (padding < initialPadding) {              padding = initialPadding;            } else {              padding -= 20.0;            }            started = !started;          });        },      ),    );  }}

复制代码

总结

本篇介绍了 AnimatedPadding 的使用，通过 AnimatedPadding可以使用动画的方式调节子组件在父组件中的内边距。AnimatedPadding 具体的应用场景想不出太多，如果是放大缩小这种方式确实可以，但是也可以使用 Matrix4的 scale 方法来实现，而使用AnimatedPadding好处之一应该是不会超出父组件的边界（padding 值不允许是负数，会抛异常）。关于AnimatedPadding的应用场景，各位掘友如果有好的想法也可以在评论区分享一下🙏🏻。