如何在颤动中制作滚动计数器

Posted 2023-02-23

【中文标题】如何在颤动中制作滚动计数器

【英文标题】：How to make scrolling counter in flutter

【发布时间】：2019-10-29 15:58:59

【问题描述】：

我想创建一个滚动计数器，我想知道如何在颤振中实现它。

【参考方案1】：

我想在一个项目中做到这一点，所以我创建了一个名为AnimatedFlipCounter 的隐式动画小部件，它可以达到类似的效果。

我已将它作为一个包发布：https://pub.dev/packages/animated_flip_counter

用法：

AnimatedFlipCounter(
   duration: Duration(milliseconds: 500),
   value: _value, /* pass in a number like 2014 */
)

小数：

AnimatedFlipCounter(
  value: _value,
  fractionDigits: 2, // decimal precision
  suffix: "%",
  textStyle: TextStyle(
      fontSize: 40,
      color: _value >= 0 ? Colors.green : Colors.red,
  ),
)

【讨论】：

很好，但是如何实现双精度值？ + 我有兴趣为这个项目做出贡献，你能提供项目链接吗？

@ElMobark 感谢您的建议。我已经用十进制支持更新它，并将它发布到 pub，请参阅更新答案中的链接。

你好，我真的很惊讶你的工作，不管怎样，我正在开发一个 Flutter 库，它可以在 ios 中制作像 twitter 这样的启动画面 如果我能从你的惊人技能中受益，我将非常感激， 你怎么看？我们可以参加吗？

【参考方案2】：

你应该通过以下方式实现

class ValueChangeAnimationWidget extends StatefulWidget 
  @override
  ValueChangeAnimationWidgetState createState() =>
      ValueChangeAnimationWidgetState();


class ValueChangeAnimationWidgetState
    extends State<ValueChangeAnimationWidget> with TickerProviderStateMixin 
  AnimationController controller;
  Animation animation;

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

    controller = AnimationController(
        duration: const Duration(milliseconds: 1000), vsync: this);
    final Animation curve =
    CurvedAnimation(parent: controller, curve: Curves.easeOut);
    animation = IntTween(begin: 0, end: 10).animate(curve)
      ..addStatusListener((status) 
        if (status == AnimationStatus.completed) 
          controller.reverse();
        
        if (status == AnimationStatus.dismissed) 
          Navigator.pop(context);
        
      );
  

  @override
  Widget build(BuildContext context) 
    controller.forward();
    return AnimatedBuilder(
        animation: controller,
        builder: (BuildContext context, Widget child) 
          return Scaffold(
              body: new Center(
                child: Text(animation.value.toString(), style: TextStyle(fontSize: 48.0)),
              ));
        );
  

  @override
  void dispose() 
    controller.dispose();
    super.dispose();
  

【讨论】：

这只是将文本从 0 更改为 10，但没有滚动动画。

【参考方案3】：

我在动画生成器中使用补间动画

IntTween(begin: 0, end: starredCount).animate(
      CurvedAnimation(parent: animationController, curve: Curves.easeOut)

【讨论】：

感谢@murat 的回复。能否请您简要解释一下。我没有得到你的答案。