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

Question

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

- Ravi Dhorajiya

Answer 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,
  ),
)

- WSBT

---

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

@ElMobark 感谢您的建议。我已经添加了十进制支持，并将其发布到 pub 上，请查看更新后答案中的链接。 - WSBT

你好，我对你的工作感到非常惊叹。无论如何，我正在开发一个Flutter库，可以像Twitter在iOS中一样制作启动画面。如果能从你的出色技能中受益，我将不胜感激。你觉得我们可以合作吗？ - ElMobark

Answer 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();
  }
}

- Nikhil Vadoliya

---

这仅仅将文本从0更改为10，但没有滚动动画。 - WSBT

参数类型“Animation <dynamic>”无法分配给参数类型“Animation <double>”。 - Aditya Patil

Answer 3

我使用Tween动画和动画构建器

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

- Murat Aslan

---

谢谢您的回复，@murat。您能否简要解释一下？我没有理解您的答案。 - Ravi Dhorajiya

@Murat Aslan，请提供正确的代码以运行它。 - Rajesh

@RaviDhorajiya 我试图弄清楚他的代码片段，但结果并不如预期，无论如何我在这里留下它：返回TweenAnimationBuilder<int>( tween: IntTween(begin: 0, end: 1500), duration: const Duration(milliseconds: 1500), builder: (BuildContext context, int val, _) { return Text('$val'); }, ); - Rajesh