You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter TextFormField绑定controller时TextInputType.number无法正常输入问题

这个问题的核心诱因是数字键盘输入纯数字时,没有匹配的输入校验规则允许内容写入控制器,默认的文本校验逻辑误拦截了纯数字输入。以下是可直接落地的解决方法:

解决方案

  • 第一步:引入服务包,顶部导入输入格式化工具
import 'package:flutter/services.dart';
  • 第二步:给TextFormField添加inputFormatters属性,配置允许输入的数字规则,可根据需求调整正则匹配规则:
    仅允许输入整数:
    inputFormatters: [FilteringTextInputFormatter.digitsOnly],
    
    允许输入小数:
    inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'^\d+\.?\d*$'))],
    
    允许输入负数和小数:
    inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'^-?\d+\.?\d*$'))],
    
  • 可选补充:如果之前给控制器设置了非法初始值,初始化控制器时明确指定合法初始值即可:
final TextEditingController _questionIndexController = TextEditingController(text: "");

修正后的完整代码

import 'package:flutter/services.dart';

// 控制器初始化
final TextEditingController _questionIndexController = TextEditingController(text: "");

return Container(
  height: _avaliableHeight * 0.05,
  width: _sideBarWidth * 0.25,
  child: TextFormField(
    controller: _questionIndexController,
    keyboardType: TextInputType.number,
    // 新增输入格式化规则,这里以纯整数为例,可自行替换为需要的规则
    inputFormatters: [FilteringTextInputFormatter.digitsOnly],
    style: TextStyle(fontSize: 10,),
    decoration: InputDecoration(
      contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 5.0),
      border: OutlineInputBorder(borderRadius: BorderRadius.circular(10.0)),
    ),
    textInputAction: TextInputAction.done,
  ),
);

内容的提问来源于stack exchange,提问作者Rui Zhu

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.06 23:18:03