这是一个用于实现自定义数值增减 Stepper 的Flutter组件,它支持三种样式:system、outlined和textfield。其中,system和outlined样式分别使用IconButton实现增减按钮,而textfield样式使用TextField实现数值输入和增减按钮。
在使用该组件时,需要传入一些必要的参数,包括最小值、最大值、步长、初始值和一个回调函数,用于处理数值变化事件。根据传入的样式类型,该组件会渲染出不同的界面,并且在用户点击增减按钮或者输入框中输入数值时,会根据步长和边界条件计算出新的数值,并且通过回调函数将新的数值传递给父组件进行处理。
在该组件的实现过程中,使用了TextEditingController和FocusNode来控制输入框中的数值以及输入框的聚焦状态。同时,使用了setState方法来更新界面上的数值和按钮状态。
如果您需要使用该组件,可以根据自己的需求选择不同的样式,同时通过传入必要的参数和回调函数来实现相应的功能
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_templet_project/extensions/ddlog.dart';
enum NumberStepperStyle {
system,
outlined,
textfield,
}
///自定义数值增减 Stepper
class NumberStepper extends StatefulWidget {
NumberStepper({
required this.minValue,
required this.maxValue,
required this.stepValue,
this.iconSize = 24,
required this.value,
this.color = Colors.blue,
this.style = NumberStepperStyle.system,
this.radius = 5.0,
this.wraps = true,
required this.block,
});
final int minValue;
final int maxValue;
final int stepValue;
final double iconSize;
int value;
final bool wraps;
final Color color;
final NumberStepperStyle style;
final double radius;
void Function(int value) block;
@override
_NumberStepperState createState() => _NumberStepperState();
}
class _NumberStepperState extends State<NumberStepper> {
// 控制器
final _textController = TextEditingController();
// 焦点
final focusNode1 = FocusNode();
@override
void initState() {
// TODO: implement initState
_textController.text = "${widget.value}";
ddlog(_textController.text);
super.initState();
}
@override
Widget build(BuildContext context) {
// return buildOther(context);
switch (widget.style) {
case NumberStepperStyle.outlined:
return buildOutlinedStyle(context);
break;
case NumberStepperStyle.textfield:
return buildTexfieldStyle(context);
default:
break;
}
return buildSystemStyle(context);
}
Widget buildSystemStyle(BuildContext context) {
return Row(
mainAxisAlignment: Mai