Flutter数字递增动画插件countup的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter数字递增动画插件countup的使用

简介

Countup 是一个Flutter包，它帮助你创建适用于Android和iOS的动画文本小部件。它是基于 mccounting_text 开发的。

pub package License: MIT

简单使用

要使用 Countup 小部件，你需要提供开始值（begin）、结束值（end）和持续时间（duration）。根据需要，你还可以设置分隔符（separator）和样式（style）。

Countup(
  begin: 0,
  end: 7500,
  duration: Duration(seconds: 3),
  separator: ',',
  style: TextStyle(
    fontSize: 36,
  ),
)

'flutter-countup-basic'

属性

以下是 Countup 小部件支持的所有属性：

  • begin: 动画开始的数值。
  • end: 动画结束的数值。
  • separator: 数字之间的分隔符，默认为逗号（,）。
  • duration: 动画的持续时间。
  • style: 文本样式。
  • prefix: 前缀字符串。
  • suffix: 后缀字符串。
  • precision: 小数点后保留的位数。
  • curve: 动画曲线类型。
  • textAlign: 文本对齐方式。
  • textDirection: 文本方向。
  • locale: 区域设置。
  • softWrap: 是否自动换行。
  • overflow: 文本溢出处理方式。
  • textScaleFactor: 文本缩放因子。
  • maxLines: 最大行数。
  • semanticsLabel: 语义标签。

示例代码

下面是一个完整的示例代码，展示了如何在Flutter应用程序中使用 Countup 插件。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Countup Example',
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Countup Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Countup(
                begin: 0,
                end: 7500,
                duration: Duration(seconds: 3),
                separator: ',',
                style: TextStyle(
                  fontSize: 36,
                ),
              ),
              SizedBox(height: 20),
              Countup(
                begin: 0,
                end: 100.5,
                duration: Duration(seconds: 2),
                separator: ',',
                style: TextStyle(
                  fontSize: 24,
                  color: Colors.blue,
                ),
                prefix: 'Prefix ',
                suffix: ' Suffix',
                precision: 2,
                curve: Curves.easeInOut,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个包含两个 Countup 小部件的应用程序：

  1. 第一个 Countup 小部件从0递增到7500，持续时间为3秒，并使用逗号作为千位分隔符，字体大小为36。
  2. 第二个 Countup 小部件从0递增到100.5，持续时间为2秒，带有前缀和后缀，精度为两位小数，并使用了自定义的动画曲线。

你可以根据自己的需求调整这些属性，以实现不同的动画效果。希望这个示例对你有所帮助！


更多关于Flutter数字递增动画插件countup的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter数字递增动画插件countup的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter中使用countup插件来实现数字递增动画的示例代码。countup插件可以帮助你创建一个平滑的数字递增动画效果。

首先，你需要在pubspec.yaml文件中添加countup依赖：

dependencies:
  flutter:
    sdk: flutter
  countup: ^1.0.3  # 请检查最新版本号

然后运行flutter pub get来安装依赖。

接下来是一个完整的示例代码，展示如何在Flutter中使用countup插件：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter CountUp Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CountUpExample(),
    );
  }
}

class CountUpExample extends StatefulWidget {
  @override
  _CountUpExampleState createState() => _CountUpExampleState();
}

class _CountUpExampleState extends State<CountUpExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);

    _animation = Tween<double>(begin: 0, end: 100).animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('CountUp Animation Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CountUp(
              from: 0,
              to: _animation.value.toInt(),
              duration: 2000,
              style: TextStyle(fontSize: 48),
              separator: ',',
              decimalPlaces: 0,
              useEasing: true,
              easingFn: Easing.easeInOutQuad,
              builder: (context, snapshot) {
                return Text(
                  snapshot.data ?? '',
                  style: TextStyle(color: Colors.blue, fontSize: 48),
                );
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                _controller.reset();
                _controller.forward();
              },
              child: Text('Restart Animation'),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释：

  1. 依赖添加：在pubspec.yaml中添加countup依赖。

  2. MyApp和CountUpExample类：基本的Flutter应用结构。

  3. 动画控制：

    • 使用AnimationController来控制动画的时长和重复行为。
    • 使用Tween来定义动画的起始值和结束值。

  4. CountUp组件：

    • from：动画开始的数值。
    • to：动画结束的数值（这里绑定到_animation.value.toInt()，这样动画会跟随_controller的变化）。
    • duration：动画持续时间。
    • style：文本样式。
    • separator：千位分隔符。
    • decimalPlaces：小数点位数。
    • useEasing：是否使用缓动函数。
    • easingFn：缓动函数类型。
    • builder：构建动画文本的Widget。

  5. 重置和重启动画：通过点击按钮来重置并重新启动动画。

这个示例展示了如何使用countup插件创建一个简单的数字递增动画，并结合Flutter的动画控制器来控制动画的行为。你可以根据需要调整动画的持续时间、结束值和其他参数。

回到顶部