前言

近期有个事务需求,涉及用户付费相关的核算,需要一个步进器核算组件,组件功用如下:

  • 仅限支撑整数,约束值规模
  • 每次步进加累加 5
  • 支撑文本框手动输入,失掉焦点后成果会主动校正为 5 的倍数
  • 每次成果改变会有个放大动画的作用

一个简单的 Flutter 步进器计算组件

Github:tw_step_counter

安装

dependencies:
  tw_step_counter: ^0.1.5

作用

一个简单的 Flutter 步进器计算组件

运用

配置特点

 /// 每次按钮点击递增递减值
  final double differValue;
  /// 每次输入倍数,失掉焦点时触发
  final double? inputMultipleValue;
  /// 支撑最小值
  final double mixValue;
  /// 支撑最大值
  final double maxValue;
  /// 按钮宽度
  final double? btnWidth;
  /// 高度
  final double? height;
  /// 值色彩
  final Color? valueColor;
  /// 字体大小
  final double? valueFontSize;
  /// 单位
  final String? unit;
  /// 单位色彩
  final Color? unitColor;
  /// 单位字体大小
  final double? unitFontSize;
  /// 当时值
  final double? currentValue;
  /// 点击回调
  final void Function(double value)? onTap;
  /// 输入的回调
  final void Function(double value)? inputTap;
  /// 默许色彩
  final Color? iconColor;
  /// 禁止点击色彩
  final Color? forbiddenIconColor;
  /// 保存多少位小数位
  final int decimalsCount;
  /// 高亮色彩
  final Color? highlightColor;
  /// 默许背景色
  final Color? defaultColor;
  /// 边线色彩
  final Color? borderLineColor;
  /// 空隙
  final EdgeInsetsGeometry? padding;
  /// 值的组件空隙
  final EdgeInsetsGeometry? valuePadding;
  /// 控制器
  final TWStepCounterController? controller;
  /// 是否支撑小数点
  final bool? decimal;
  /// 是否主动约束值规模,默许会
  final bool isUpdateInLimitValue;
  /// 是否支撑动画,默许会
  final bool isSupportAnimation;
    /// 约束输入的长度
  final int? limitLength;

DEMO

TWStepCounter(
      unit: '元/天',
      currentValue: 130,
      mixValue: 75,
      maxValue: 250,
      onTap: (value) {
        print('点击回调===>$value');
      },
      inputTap: (value) {
        print('输入回调===>$value');
      },
      controller: controller,
      defaultColor: TWColors.tw999999,
      highlightColor: Colors.yellow,
      borderLineColor: Colors.red,
      inputMultipleValue: 5,
      // height: 70,
      // isUpdateInLimitValue: false,
      // isSupportAnimation: false,
      // decimal: true,
      // decimalsCount: 2,
      valuePadding: const EdgeInsets.only(
        left: 10,
        right: 10,
      ),
    )