Flutter增减表单字段插件increment_decrement_form_field的使用

增减一个值使用间距水平IconButton并包裹在FormField中

增减一个整数示例（示例代码）

/*
    增减一个整数
*/
IncrementDecrementFormField<int>(
    // 初始值
    initialValue: 0,

    // 返回你希望用来保存值的组件，这里是Text
    // 如果没有值设置为0，否则显示值作为字符串
    displayBuilder: (value, field) {
        return Text(
            value == null ? "0" : value.toString(),
        );
    },

    // 当左按钮被按下时运行（减量）
    // 当前值作为参数传递
    // 返回当减量被按下时更新显示值的值
    // 在这种情况下如果为空则为0，否则当前值减1
    onDecrement: (currentValue) {
        return currentValue! - 1;
    },

    // 当右按钮被按下时运行（增量）
    // 当前值作为参数传递
    // 返回当增量被按下时更新显示值的值
    // 在这种情况下如果为空则为0，否则当前值加1
    onIncrement: (currentValue) {
        return currentValue! + 1;
    },
),

带错误检查的字母增减示例（示例代码）

/*
    带错误检查的字母增减
*/
IncrementDecrementFormField<String>(
    // 自动验证设置，因此每当输入更改时都会验证
    autovalidateMode: AutovalidateMode.always,

    // 设置初始值
    initialValue: "a",

    // 显示当前字符
    displayBuilder: (value, field) {
        return Text(
            value!,
        );
    },

    // 减量当前字符码减1
    onDecrement: (currentValue) {
        return String.fromCharCode(
            currentValue!.codeUnitAt(0) - 1,
        );
    },

    // 增量当前字符码加1
    onIncrement: (currentValue) {
        return String.fromCharCode(
            currentValue!.codeUnitAt(0) + 1,
        );
    },

    // 如果不在a到z的小写字母范围内报错
    validator: (value) {
        if (value == null ||
            value.length != 1 ||
            value.codeUnitAt(0) < "a".codeUnitAt(0) ||
            value.codeUnitAt(0) > "z".codeUnitAt(0)) {
            return "Value out of bounds";
        }
        return null;
    },
),

增量2减量1带表单和验证，值在0到10之间（包括）示例（示例代码）

/*
    增量2减量1带表单和验证
    值在0到10之间（包括）
*/
StatefulBuilder(
    builder: (context, setState) {
        return Form(
            key: formKey,
            child: Column(
                children: [
                    IncrementDecrementFormField<int>(
                        // 自动验证并设置初始值
                        autovalidateMode: AutovalidateMode.always,
                        initialValue: 0,

                        // 显示当前值
                        displayBuilder: (value, field) {
                            return Text(
                            value!.toString(),
                            );
                        },

                        // 减量1
                        onDecrement: (currentValue) {
                            return currentValue! - 1;
                        },

                        // 增量2
                        onIncrement: (currentValue) {
                            return currentValue! + 2;
                        },

                        // 验证是否在0到10之间（包括）
                        validator: (value) {
                            if (value == null || value > 10 || value < 0) {
                                return "Value out of bounds";
                            }
                            return null;
                        },

                        // 添加onSaved函数，当表单调用onSaved时设置持有者值
                        onSaved: (value) {
                            holder = value!;
                        },
                    ),

                    // 提交按钮和提交值的显示
                    // 如果成功验证通过调用save设置持有者
                    ElevatedButton(
                        onPressed: () {
                            if (formKey.currentState!.validate()) {
                                setState(() {
                                    formKey.currentState!.save();
                                });
                            }
                        },
                        child: const Text(
                            "Submit",
                        ),
                    ),

                    // 显示提交值
                    Text(
                        "Submitted Value: $holder",
                    ),
                ],
            ),
        );
    },
),