Flutter如何实现TextField文本框的用户输入范围限制

Flutter官方提供的TextField组件未内置直接设置输入数值范围的参数，你可以通过以下两种常用方案实现1-31的区间限制需求：

方案1：使用InputFormatter实时拦截输入（推荐） #

该方案会在用户输入过程中直接过滤不符合规则的内容，从根源上避免无效输入，代码示例如下：

TextField(
  // 限制弹出数字键盘
  keyboardType: TextInputType.number,
  inputFormatters: [
    // 第一步：先限制只允许输入数字
    FilteringTextInputFormatter.digitsOnly,
    // 第二步：自定义规则限制数值范围为1-31
    TextInputFormatter.withFunction((oldValue, newValue) {
      // 允许空值，方便用户删除所有输入
      if (newValue.text.isEmpty) return newValue;
      final int? inputNum = int.tryParse(newValue.text);
      // 数值不符合规则时保留上次的有效输入
      if (inputNum == null || inputNum < 1 || inputNum > 31) {
        return oldValue;
      }
      return newValue;
    }),
  ],
  decoration: const InputDecoration(
    hintText: '请输入1-31之间的日期'
  ),
)

如果需要适配不同月份的最大天数（比如2月限制为28/29、小月限制为30），只需要把判断逻辑中的31替换为对应月份的动态最大值即可。 #

方案2：输入完成后校验+错误提示 #

如果不需要实时拦截输入，仅需要在用户提交时做校验提示，可以配合Form组件实现：

// 全局声明Form的key
final _formKey = GlobalKey<FormState>();

// 组件构建部分
Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        keyboardType: TextInputType.number,
        validator: (value) {
          if (value == null || value.isEmpty) {
            return '请输入日期';
          }
          final int? inputNum = int.tryParse(value);
          if (inputNum == null || inputNum < 1 || inputNum > 31) {
            return '请输入1-31之间的有效日期';
          }
          return null;
        },
      ),
      Padding(
        padding: const EdgeInsets.symmetric(vertical: 16),
        child: ElevatedButton(
          onPressed: () {
            // 触发校验，校验通过后执行业务逻辑
            if (_formKey.currentState!.validate()) {
              // 后续处理逻辑
            }
          },
          child: const Text('提交'),
        ),
      )
    ],
  ),
)

优化建议 #

两种方案可以组合使用：用InputFormatter做实时拦截减少无效输入，同时搭配提交校验做兜底，覆盖所有极端场景的非法值问题。 #

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