前言
近期有个事务需求,涉及用户付费相关的核算,需要一个步进器核算组件,组件功用如下:
- 仅限支撑整数,约束值规模
- 每次步进加累加 5
- 支撑文本框手动输入,失掉焦点后成果会主动校正为 5 的倍数
- 每次成果改变会有个放大动画的作用
Github:tw_step_counter
安装
dependencies:
tw_step_counter: ^0.1.5
作用
运用
配置特点
/// 每次按钮点击递增递减值
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,
),
)