flutter TextField只能输入0到9和小数点，并且只保留两位小数

小蜜蜂嗡嗡

已于 2025-07-15 10:18:08 修改

阅读量762

点赞数 1

CC 4.0 BY-SA版权

文章标签： flutter

于 2024-03-22 09:46:34 首次发布

本文链接：https://blog.youkuaiyun.com/androidhyf/article/details/136930677

本文详细描述了如何在Flutter中使用TextField组件创建一个允许用户输入两位小数的数字输入框，包括定制输入限制、装饰器和键盘类型，适用于技术社区的内容创作和IT开发者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Container(
                  width: double.infinity,
                  height: 54.w,
                  padding: EdgeInsets.symmetric(horizontal: 20.w),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(5),
                      border: Border.all(width: 1.w,color: JadeColors.grey)
                  ),
                  child: TextField(
                    textAlign: TextAlign.start,
              //      controller: state.cellColumnController,
                    style: TextStyle(fontSize: 24.sp, color: JadeColors.grey_2),
                    keyboardType: TextInputType.number,
                    textInputAction: TextInputAction.done,
                    inputFormatters: [
                      NumberTextInputFormatter(2),//限制只输入到小数点后两位
                      FilteringTextInputFormatter(RegExp("[0-9.]"), allow: true),
                    ],
                    maxLines: 1,
                    maxLength: 40,
                    decoration: InputDecoration(
                        filled: true,
                        fillColor: Colors.white,
                        isCollapsed: true,
                        isDense: true,
                        contentPadding: EdgeInsets.zero,
                        hintText: '请输入原价',
                        hintStyle: TextStyle(
                          fontSize: 24.sp,
                          color: JadeColors.grey,
                        ),
                        disabledBorder: OutlineInputBorder(
                            borderSide: BorderSide.none,
                            borderRadius: BorderRadius.circular(8.w)
                        ),
                        enabledBorder: OutlineInputBorder(
                            borderSide: BorderSide.none),
                        focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide.none),
                        border: OutlineInputBorder(
                            borderSide: BorderSide.none),
                        counterText: ''
                    ),
                    onChanged: (value) {},
                    cursorColor: JadeColors.grey,
                  )),

import 'package:flutter/services.dart';

// 限制小数位数
class NumberTextInputFormatter extends TextInputFormatter {
  int _scale;

  NumberTextInputFormatter(this._scale);

  RegExp exp = new RegExp("[0-9.]");
  static const String POINTER = ".";
  static const String DOUBLE_ZERO = "00";

  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    ///输入完全删除
    if (newValue.text.isEmpty) {
      return TextEditingValue();
    }

    ///只允许输入小数
    if (!exp.hasMatch(newValue.text)) {
      return oldValue;
    }

    ///包含小数点的情况
    if (newValue.text.contains(POINTER)) {
      ///包含多个小数
      if (newValue.text.indexOf(POINTER) !=
          newValue.text.lastIndexOf(POINTER)) {
        return oldValue;
      }
      String input = newValue.text;
      int index = input.indexOf(POINTER);

      ///小数点后位数
      int lengthAfterPointer = input.substring(index, input.length).length - 1;

      ///小数位大于精度
      if (lengthAfterPointer > _scale) {
        return oldValue;
      }
    }
    return newValue;
  }
}