Flutter数字滚动动画插件number_rolling的使用

Flutter数字滚动动画插件number_rolling的使用

特性

  • 美丽的数字动画
  • 可自定义的持续时间
  • 无缝集成
  • 支持任意数值范围

开始使用

首先，在pubspec.yaml文件中添加依赖：

dependencies:
  number_rolling_widget: ^1.0.0

然后，导入所需的包并创建一个基本的Flutter应用：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('数字滚动动画插件示例'),
        ),
        body: Center(
          child: NumberRollingWidgetExample(),
        ),
      ),
    );
  }
}

class NumberRollingWidgetExample extends StatefulWidget {
  [@override](/user/override)
  _NumberRollingWidgetExampleState createState() => _NumberRollingWidgetExampleState();
}

class _NumberRollingWidgetExampleState extends State<NumberRollingWidgetExample> {
  int _targetValue = 123;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          '目标值: $_targetValue',
          style: TextStyle(fontSize: 20),
        ),
        SizedBox(height: 20),
        NumberRollingWidget(endValue: _targetValue),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            setState(() {
              _targetValue += 100; // 更改目标值以进行演示
            });
          },
          child: Text('更改目标值'),
        ),
      ],
    );
  }
}

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

1 回复

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


number_rolling 是一个用于在 Flutter 中实现数字滚动动画的插件。它可以让你轻松地创建数字从初始值滚动到目标值的动画效果，适用于展示计数器、分数、金额等场景。

安装

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

dependencies:
  flutter:
    sdk: flutter
  number_rolling: ^1.0.0  # 请确保使用最新版本

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

基本用法

以下是一个简单的示例，展示如何使用 number_rolling 插件来实现数字滚动动画：

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

class NumberRollingExample extends StatefulWidget {
  @override
  _NumberRollingExampleState createState() => _NumberRollingExampleState();
}

class _NumberRollingExampleState extends State<NumberRollingExample> {
  int _currentNumber = 0;

  void _incrementNumber() {
    setState(() {
      _currentNumber += 100;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Number Rolling Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            NumberRolling(
              number: _currentNumber,
              duration: Duration(seconds: 2),
              style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _incrementNumber,
              child: Text('Increase Number'),
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: NumberRollingExample(),
  ));
}

参数说明

  • number: 要显示的目标数字。
  • duration: 动画的持续时间。
  • style: 数字的文本样式。
  • separator: 数字之间的分隔符（例如千位分隔符）。
  • decimalPlaces: 小数位数。
  • curve: 动画的曲线（例如 Curves.easeInOut）。

自定义动画

你可以通过调整 duration 和 curve 参数来自定义动画效果。例如：

NumberRolling(
  number: _currentNumber,
  duration: Duration(milliseconds: 500),
  curve: Curves.easeInOut,
  style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
);

处理小数和分隔符

如果你需要显示带有小数或千位分隔符的数字，可以使用 decimalPlaces 和 separator 参数：

NumberRolling(
  number: _currentNumber,
  duration: Duration(seconds: 2),
  style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
  decimalPlaces: 2,  // 显示两位小数
  separator: ',',    // 使用逗号作为千位分隔符
);
回到顶部