Flutter TextField数字输入优化：禁止空值与自动去除前置0

针对你遇到的两个问题，我们可以通过修改输入处理逻辑和添加格式化规则来解决，以下是具体实现：

修改后的完整代码 #

int stock = 0;
late TextEditingController controller;

@override
void initState() {
  super.initState();
  controller = TextEditingController(text: '$stock');
}

@override
void dispose() {
  controller.dispose();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  return Container(
    margin: const EdgeInsets.fromLTRB(16, 12, 16, 0),
    child: Row(children: [
      Container(
        padding: EdgeInsets.symmetric(horizontal: 12),
        width: 40,
        child: TextField(
          controller: controller,
          maxLength: 3,
          textAlign: TextAlign.center,
          decoration: const InputDecoration(
            border: InputBorder.none,
            counterText: "",
          ),
          keyboardType: TextInputType.number,
          inputFormatters: [
            // 只允许输入数字
            FilteringTextInputFormatter.digitsOnly,
            // 自定义格式化规则处理空值和前置0
            TextInputFormatter.withFunction((oldValue, newValue) {
              // 空输入自动填充0
              if (newValue.text.isEmpty) {
                return const TextEditingValue(
                  text: '0',
                  selection: TextSelection.collapsed(offset: 1)
                );
              }
              // 去除前导零，保留单个0的情况
              String cleanedText = newValue.text.replaceFirst(RegExp(r'^0+(?=\d)'), '');
              cleanedText = cleanedText.isEmpty ? '0' : cleanedText;
              return TextEditingValue(
                text: cleanedText,
                selection: TextSelection.collapsed(offset: cleanedText.length)
              );
            }),
          ],
          onChanged: (value) {
            // 同步更新stock变量
            stock = int.parse(value);
          },
        ),
      ),
      // 示例增减按钮
      IconButton(
        icon: const Icon(Icons.add),
        onPressed: () {
          if (stock < 999) {
            stock++;
            controller.text = '$stock';
          }
        },
      ),
      IconButton(
        icon: const Icon(Icons.remove),
        onPressed: () {
          if (stock > 0) {
            stock--;
            controller.text = '$stock';
          }
        },
      ),
    ]),
  );
}

关键修改说明 #

1. 控制器初始化优化
   将TextEditingController移到initState中初始化，避免每次build重建控制器导致输入状态丢失，同时在dispose方法中销毁控制器，防止内存泄漏。

2. 解决空值问题
   通过自定义输入格式化器，当输入内容为空时，自动将TextField内容设置为"0"，并将光标定位到末尾，避免空值出现。

3. 解决前置0问题
   使用正则表达式^0+(?=\d)匹配并去除前导零，同时保留单个"0"的合法情况（比如输入"0"时保持不变，输入"012"自动转为"12"）。

4. 同步数值状态
   格式化后的输入内容直接在onChanged中解析为整数，同步更新stock变量，确保数据一致性。

内容的提问来源于stack exchange，提问作者CCP