Flutter数字计数插件count_number的使用

Flutter数字计数插件count_number的使用

count_number 插件用于实现一个基于弹簧模拟的数值动画效果。它通过内部周期性定时器检查模拟状态，并在必要时调用相应的回调函数。该值可以是整数或双精度浮点数。

特性

• 动画化地增加或减少数值。
• 支持整数和浮点数。
• 只在实际需要时调用回调函数。
• 可以初始化为动态。
• 设置 value 属性将触发新的计数过程。

开始使用

添加依赖

在 pubspec.yaml 文件中添加以下依赖：

flutter pub add count_number

导入包

在 Dart 文件中导入 count_number 包：

import 'package:count_number/count_number.dart';

使用示例

初始化 CountNumber 对象

class _HomeState extends State<Home> {
  num _number = 0;
  bool _isNumActive = true;
  late CountNumber _countNumber;
  late TextEditingController _txtController;

  [@override](/user/override)
  void initState() {
    _txtController = TextEditingController(text: '0');
    _countNumber = CountNumber(
      endValue: _number,
      onUpdate: onCountUpdate,
      onDone: onCountDone,
      isDynamic: true,
    );
    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    _countNumber.stop();
    _txtController.dispose();
    super.dispose();
  }

  void onCountUpdate(num value) {
    setState(() => _number = value);
  }

  void onCountDone() {
    setState(() => _isNumActive = true);
  }

  void _onPressed() {
    if (_isNumActive) {
      num? newVal = num.tryParse(_txtController.text);
      if (newVal != null) {
        _isNumActive = false;
        _countNumber.value = newVal;
      }
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Expanded(
              child: Center(
            child: Text(
              CountNumber.isInteger(_number)
                  ? _number.toString()
                  : _number.toStringAsFixed(2),
              style: Theme.of(context).textTheme.headline1,
            ),
          )),
          Card(
            elevation: 12,
            margin: const EdgeInsets.symmetric(
              vertical: 30,
              horizontal: 20,
            ),
            child: Row(
              children: [
                const SizedBox(
                  width: 15,
                ),
                Expanded(
                  flex: 2,
                  child: Padding(
                    padding: const EdgeInsets.symmetric(
                      vertical: 5,
                      horizontal: 20,
                    ),
                    child: TextField(
                      controller: _txtController,
                      enabled: _isNumActive,
                      keyboardType: TextInputType.number,
                      textAlign: TextAlign.center,
                      onSubmitted: (_) => _onPressed(),
                      style: Theme.of(context).textTheme.headline4?.copyWith(
                            fontWeight: FontWeight.w200,
                          ),
                      decoration: const InputDecoration(
                        fillColor: Colors.white70,
                        filled: true,
                        contentPadding: EdgeInsets.all(10),
                        border: OutlineInputBorder(
                            borderRadius: BorderRadius.all(Radius.circular(10)),
                            borderSide: BorderSide(
                              color: Colors.cyan,
                            )),
                      ),
                    ),
                  ),
                ),
                const Spacer(),
                TextButton(
                  onPressed: _onPressed,
                  child: const Text('Count!'),
                ),
                const SizedBox(
                  width: 15,
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

运行计数

在 build 方法中调用 _countNumber.start() 方法启动计数动画：

[@override](/user/override)
Widget build(BuildContext context) {
  _countNumber.start();

  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Column(
      children: [
        Expanded(
            child: Center(
          child: Text(
            CountNumber.isInteger(_number)
                ? _number.toString()
                : _number.toStringAsFixed(2),
            style: Theme.of(context).textTheme.headline1,
          ),
        )),
        Card(
          elevation: 12,
          margin: const EdgeInsets.symmetric(
            vertical: 30,
            horizontal: 20,
          ),
          child: Row(
            children: [
              const SizedBox(
                width: 15,
              ),
              Expanded(
                flex: 2,
                child: Padding(
                  padding: const EdgeInsets.symmetric(
                    vertical: 5,
                    horizontal: 20,
                  ),
                  child: TextField(
                    controller: _txtController,
                    enabled: _isNumActive,
                    keyboardType: TextInputType.number,
                    textAlign: TextAlign.center,
                    onSubmitted: (_) => _onPressed(),
                    style: Theme.of(context).textTheme.headline4?.copyWith(
                          fontWeight: FontWeight.w200,
                        ),
                    decoration: const InputDecoration(
                      fillColor: Colors.white70,
                      filled: true,
                      contentPadding: EdgeInsets.all(10),
                      border: OutlineInputBorder(
                          borderRadius: BorderRadius.all(Radius.circular(10)),
                          borderSide: BorderSide(
                            color: Colors.cyan,
                          )),
                    ),
                  ),
                ),
              ),
              const Spacer(),
              TextButton(
                onPressed: _onPressed,
                child: const Text('Count!'),
              ),
              const SizedBox(
                width: 15,
              ),
            ],
          ),
        )
      ],
    ),
  );
}