Flutter TextField利用正则和输入监听设置只能输入零和非零开头的最多带两位小数的数字（整数或小数）

最新推荐文章于 2024-07-22 07:02:37 发布

日渐消瘦 - 来自一个高龄程序员的心声

最新推荐文章于 2024-07-22 07:02:37 发布

阅读量852

点赞数 13

分类专栏：玩转flutter 笔记文章标签： flutter ui

本文链接：https://blog.csdn.net/qq_23404533/article/details/134736172

版权

玩转flutter 同时被 2 个专栏收录

16 篇文章 3 订阅

订阅专栏

笔记

11 篇文章 0 订阅

订阅专栏

1.在自定义TextInputFormatter中使用正则以及相关逻辑

/// 只能输入零和非零开头的最多带两位小数的数字
class _OnlyInputNumberWithDecimalPointFormatter extends TextInputFormatter {
  final _regExp = RegExp(r"^(0|[1-9][0-9]*)+(\.[0-9]{1,2})?$");

  // final _regExp = RegExp(r"^[0-9]+(\.[0-9]{1,2})?$");

  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    if (newValue.text.isNotEmpty) {
      if (_regExp.firstMatch(newValue.text) != null) {
        if (oldValue.text.length == 1 && oldValue.text == "0") {
          if (newValue.text.length == 2 && newValue.text.endsWith("0")) {
            // 避免连续输入0
            return oldValue;
          } else if (newValue.text.length == 2 &&
              !newValue.text.endsWith("0") &&
              !newValue.text.endsWith(".")) {
            // 避免输入01、02、03、...
            var realNewValue = newValue.text.substring(1);
            return TextEditingValue(
                text: realNewValue,
                selection:
                    TextSelection.collapsed(offset: realNewValue.length));
          }
        }
        return newValue;
      } else if (!oldValue.text.contains(".") && newValue.text.contains(".")) {
        // 输入时：正则有点问题，无法输入小数点，在这里处理小数点
        return newValue;
      } else if (oldValue.text.length > newValue.text.length &&
          (oldValue.text.indexOf(".") == oldValue.text.length - 2) &&
          newValue.text.endsWith(".")) {
        // 删除时：正则有点问题，无法删除小数点，在这里处理小数点
        var realNewValue = newValue.text.split(".")[0];
        return TextEditingValue(
            text: realNewValue,
            selection: TextSelection.collapsed(offset: realNewValue.length));
      }
      return oldValue;
    }
    return newValue;
  }
}

2.组装成函数调用

/// 只能输入零和非零开头的最多带两位小数的数字
  static TextInputFormatter onlyInputNumberWithDecimalPointFormatter() {
    return _OnlyInputNumberWithDecimalPointFormatter();
  }

3.在TextField中使用

                                TextField(
                                  cursorColor: AppColor.appThemeColor,
                                  controller: model.yueEditController,
                                  style: AppTextStyle.stC000000S14W400,
                                  decoration: InputDecoration(
                                    contentPadding: const EdgeInsets.all(0),
                                    hintText: "输入转入金额",
                                    hintStyle: AppTextStyle.stC666666S14,
                                    border: InputBorder.none,
                                    focusedBorder: InputBorder.none,
                                  ),
                                  keyboardType:
                                      const TextInputType.numberWithOptions(
                                          decimal: true),
                                  inputFormatters: [
                                    xxx.onlyInputNumberWithDecimalPointFormatter(),
                                  ],
                                )