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

原创 已于 2025-07-15 10:18:08 修改 · 873 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#flutter

于 2024-03-22 09:46:34 首次发布
本文详细描述了如何在Flutter中使用TextField组件创建一个允许用户输入两位小数的数字输入框，包括定制输入限制、装饰器和键盘类型，适用于技术社区的内容创作和IT开发者参考。 
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;
  }
}
JS格式化数字金额用逗号隔开保留两位小数
10-26
最后，函数通过一系列的字符串操作，把数字分为整数部分和小数部分，对整数部分进行逗号隔开的处理，并在最终输出时保留两位小数。 在数字处理完成后，整数部分使用一个循环将数字字符串逆序处理，每三位数字插入一...
flutter TextField换行自适应的实现
08-25
在Flutter开发中，TextField是用于用户输入文本的基本组件，它提供了丰富的自定义功能。本文将详细探讨如何在Flutter中实现TextField的换行自适应效果，包括自动调整高度以适应输入内容的增长，同时保持预设的内外...
Flutter系列之TextField限制数字输入
shving的专栏
06-04 9487
flutter的文本输入框TextField的设置项非常多，有时候会忘记怎么设置常用的输入限制项了，在这里罗列一下经常用到的一些设置项，免得大家去猜去记忆。
flutter TextField 限制只允许输入数字 小数点
代码小疯子
12-28 5615
flutter TextField 限制输入合法小数 核心代码片段 //只允许输入小数 inputFormatters: [ FilteringTextInputFormatter.allow(RegExp("[0-9.]")), ], //键盘类型 keyboardType: TextInputType.numberWithOptions(decimal: true), TextField 中使用完整代码片段 TextField( .
Flutter控制TextFild输入框只能输入小数点后两位
Flutter|Android移动开发
08-31 2853
1.工具类 class PrecisionLimitFormatter extends TextInputFormatter { int _scale; PrecisionLimitFormatter(this._scale); RegExp exp = new RegExp("[0-9.]"); static const String POINTER = "."; static const String DOUBLE_ZERO = "00"; @override Text
[Flutter] TextField 中只允许输入合法的小数
weixin_34203832的博客
09-13 1664
的Flutter的TextField中，我们可以通过设置inputFormatters来过滤和限制输入的内容。 下面是一个自定义的TextInputFormatter，可以限制用户只能输入有效的整数和小数。 // 只允许输入小数 class _UsNumberTextInputFormatter extends TextInputFormatter { static con...
Flutter TextField利用 正则和输入监听 设置只能输入零和非零开头的最多带两位小数的数字（整数或小数）
qq_23404533的博客
12-01 1216
1.在自定义TextInputFormatter中使用正则以及相关逻辑。3.在TextField中使用。
【Flutter 问题系列第 80 篇】TextField 输入框组件限制可输入的最大长度后，输入的内容中包含表情符号时，获取输入的内容数还是会超出限制的问题
“Allen Su”的博客
01-17 1538
如果我们判断输入内容的长度是否大于限制的长度时，应该用的是字符长度，而不是字符串长度。在输入用户名称、简介等内容时，一般我们都会限制输入框内最大可输入数（通过 TextField 组件的 maxLength 属性)，如下图限制简介最多10个字。至此，关于 TextField 输入框组件限制可输入的最大长度后，输入的内容中包含表情符号时，获取输入的内容数还是会超出限制的问题便说到这里。其实解决的话也很简单，不直接使用字符串的长度，而是使用字符串的字符长度，也就是字符串的。你的问题得到解决了吗？
Flutter TextField限制输入仅数字，字母，以及数字键盘，搜索完成设置
jia635的专栏
05-21 7175
import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; TextField( inputFormatters: [ FilteringTextInputFormatter(RegExp("[a-zA-Z]")),//只允许输入字母 ], ), TextField( inputFormatters: [Fi.
Flutter漂亮登陆界面，TextField回车光标、焦点跳转下个TextField，最后一个自动点击登陆，源码提供下载
05-28
flutter在开发登陆界面的时候，输入内容后回车光标要跳转到下个TextField，有时FocusScope.of(context).requestFocus，不起作用，经过多次查找资料，最后找到一个相对适应实际应用的方法，提供源码下载 ，请查阅！...
Flutter项目中 Dart 取两位小数 不要四舍五入的方法
前端菜鸟好先森的博客
08-11 5356
Flutter Dart 保留小数后几位 不要四舍五入
Flutter TextField 限制只允许输入数字,字母,小数,设置限制小数位数
qq_27494201的博客
06-09 2381
原文地址 TextField( inputFormatters: [ //只允许输入字母 WhitelistingTextInputFormatter(RegExp("[a-zA-Z]")), ], ), TextField( //只允许输入数字 inputFormatters: [WhitelistingTextInputFormatter.digitsOnly], ),
flutter 四舍五入保留两位小数
冬无雪的博客
03-26 1万+
四舍五入保留两位小数： double value=1265.2567; value.toStringAsFixed(2) 结果为： value = 1265.26 保留两位小数： formatNum(double num,int postion){ if((num.toString().length-num.toString().lastIndexOf(".")-1)<postion){ print('小数点后有几位小数 ${num.toStringAsFixed(post
手机直播源码，flutter 随机数的生成和保留两位小数
云豹网络科技
11-25 606
以上就是手机直播源码，flutter 随机数的生成和保留两位小数， 更多内容欢迎关注之后的文章。在dart 中，我们也可以使用小数点位移的方法，来实现保留多位小数，及四舍五入的数据。使用Random().nextInt() 方法，生成一个整数。手机直播源码，flutter 随机数的生成和保留两位小数。一、生成最小值和最大值之间的随机数。
flutter 输入框限制输入 数字、小数
代码小疯子
09-28 2369
使用正则过滤的方式来限制 新版方法 import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; TextField( //只允许输入小数 inputFormatters: [ FilteringTextInputFormatter.allow(RegExp("[0-9.]")), ], ), 旧版方法 import 'package:flutter/m
【flutter插件】TextField inputFormatters 数字输入控制（只能输入数字，包括±整数、小数）
qq_44143906的博客
02-03 1974
【flutter插件】TextField inputFormatters 数字输入控制（只能输入数字，包括±整数、小数）
直播小程序源码，flutter TextField 限制输入长度,限制输入数字文字
云豹网络科技
06-01 621
以上就是 直播小程序源码，flutter TextField 限制输入长度,限制输入数字文字。更多内容欢迎关注之后的文章。直播小程序源码，flutter TextField 限制输入长度,限制输入数字文字。
Flutter 小数取整的多种实现&保留小数点后 n 位
热门推荐
卜大爷的博客
01-05 5万+
Flutter 小数取整的多种实现&保留小数点后 n 位 在 Flutter 中，如果我们在处理小数，想要舍弃小数部分，或者想要保留小数点后面几位，怎么做呢？ 舍弃小数部分（取整） 首先我们来看如何只保留整数位，这里有很多方法可以实现： double price = 100 / 3; //舍弃当前变量的小数部分，结果为 33。返回值为 int 类型。 price.truncate(); //舍弃当前变量的小数部分，浮点数形式表示，结果为 33.0。返回值为 double。 price.trunc
Flutter自定义TextInputFormatter实现金额输入框，同时解决iOS数字键盘不能输入小数点的问题
上辈子作恶多端，这辈子写前端。
12-13 1634
所以这个时候最好的解决办法是允许输入。
flutter的输入框限制只能输入数字，并且小数点最多两位，如何实现
最新发布
11-04
<think>首先，用户的问题是关于在Flutter中实现输入框限制只能输入数字且小数点最多两位的方法。用户提供了几个引用，我需要参考这些引用来回答问题。 回顾用户提供的引用： - 引用[1]: 提到了使用TextInputFormatter.withFunction来处理小数点后两位，并确保首位不为0。它使用了RegExp("[1-9]{1}[0-9.]*")，但建议改为RegExp(r&#39;[1-9]{1}[0-9.]*&#39;)。 - 引用[2]: 简单地使用FilteringTextInputFormatter.allow(RegExp("[0-9.]"))来允许数字和小数点，但没有处理小数点后位数或首位0的问题。 - 引用[3]: 列出了TextField的各种属性，但没有具体针对这个问题的解决方案。 - 引用[4]: 提到了使用正则和输入监听来限制输入为零或非零开头的最多带两位小数的数字，并提到了一个函数封装。 用户明确说：“上述引用仅供参考，并不是用户真正的需求”，但我应该参考它们来构建答案。用户的问题是：“我想查找在Flutter中实现输入框限制只能输入数字且小数点最多两位的方法 请问Flutter实现输入框只能输入数字且小数点最多两位的方法”。所以，我需要提供一个清晰的解决方案。 关键点： - 只能输入数字（0-9）和小数点（.）。 - 小数点最多两位。 - 最好处理首位不为0的情况（除非是0.），以避免像"012"这样的输入。 从引用中提取有效方法： - 引用[1]和[4]给出了更完整的方案： - 使用TextInputFormatter.withFunction或自定义TextInputFormatter。 - 正则表达式来过滤输入。 - 处理小数点重复和位数限制。 最佳实践： - 使用TextInputFormatter来限制输入。 - 自定义一个TextInputFormatter来处理小数点最多两位。 步骤： 1. 导入必要的包：import &#39;package:flutter/services.dart&#39;; 2. 在TextField中使用inputFormatters。 3. 定义一个自定义的TextInputFormatter来处理限制。 具体实现： - 允许输入数字和小数点。 - 确保小数点只出现一次（不能有两个小数点）。 - 确保小数点后最多两位数字。 - 最好处理首位不为0的情况（除非是小数点的开头）。 从引用[4]，它提到了一个函数：onlyInputNumberWithDecimalPointFormatter()，这应该是一个自定义的formatter。 我可以基于引用[1]和[4]构建一个自定义formatter： - 使用TextInputFormatter.withFunction。 - 在函数中，检查newValue： - 如果包含小数点，确保小数点后位数不超过2。 - 确保小数点只出现一次。 - 检查首位是否为0（如果整个输入不以小数点开头）。 正则表达式可能不足以处理所有情况，因为正则表达式的限制可能不完美。更可靠的方式是使用逻辑在TextInputFormatter中检查。 示例代码： - 定义一个TextInputFormatter的子类或使用withFunction。 - 在回调中，验证输入： - 检查是否有多个小数点：如果是，返回oldValue。 - 检查小数点后位数：如果有小数点，计算小数点后字符数不超过2。 - 检查开头是否为0：如果输入以0开头且不是小数（如"012"），可能需要限制。 参考引用[1]: - newValue.text.indexOf(".") != newValue.text.lastIndexOf(".")：检查小数点是否唯一。 - newValue.text.indexOf(".") > -1 && ((newValue.text.length - 1) - newValue.text.lastIndexOf(".")) > 2：检查小数点后位数是否超过2（长度减去索引减1）。 - 然后使用FilteringTextInputFormatter.allow(RegExp(r&#39;[1-9]{1}[0-9.]*&#39;))：这允许首位是1-9，然后是数字和小数点。但问题：如果输入"0.12"，它可能被拒绝，因为以0开头。需要调整允许0开头的如果后面有小数点。 改进： - 正则表达式应该允许0开头如果是小数部分，比如允许"0.12"。引用[1]中RegExp(r&#39;[1-9]{1}[0-9.]*&#39;)不允许0开头，这可能不是最优。所以，最好使用通用正则如RegExp(r&#39;^\d*\.?\d{0,2}$&#39;)，但这可能不完美。 更健壮的方式： - 使用TextInputFormatter来动态检查，而不是纯正则。 - 定义一个自定义formatter类似引用[4]。 我将创建一个自定义TextInputFormatter类。 回答结构： - 清晰解释：先简要介绍方法。 - 提供代码示例：定义一个自定义TextInputFormatter。 - 解释关键点：如何处理小数点唯一性、位数限制、首位0问题。 - 集成到TextField：展示如何在TextField中使用。 - 确保中文回答。 - 生成相关问题。 代码示例： - 定义类： ```dart import &#39;package:flutter/services.dart&#39;; class DecimalTextInputFormatter extends TextInputFormatter { @override TextEditingValue formatEditUpdate( TextEditingValue oldValue, TextEditingValue newValue) { // 处理逻辑 // 如果新值包含多个小数点，返回旧值 if (newValue.text.indexOf(&#39;.&#39;) != newValue.text.lastIndexOf(&#39;.&#39;)) { return oldValue; } // 如果包含小数点 if (newValue.text.contains(&#39;.&#39;) { // 找到小数点位置 int dotIndex = newValue.text.indexOf(&#39;.&#39;); // 获取小数点后部分 String decimalPart = newValue.text.substring(dotIndex + 1); // 如果小数部分长度超过2，返回旧值 if (decimalPart.length > 2) { return oldValue; } } // 检查首位是否为0且后面有数字（如"012"），不允许；但允许"0."或小数点后 if (newValue.text.startsWith(&#39;0&#39;) && newValue.text.length > 1 && !newValue.text.startsWith(&#39;0.&#39;)) { return oldValue; } // 允许数字和小数点，但已经通过以上检查 // 额外确保输入只包含数字和小数点 if (RegExp(r&#39;^[0-9]*\.?[0-9]*$&#39;).hasMatch(newValue.text)) { return newValue; } return oldValue; } } ``` - 在TextField中使用： ```dart TextField( inputFormatters: [ FilteringTextInputFormatter.allow(RegExp(r&#39;[0-9.]&#39;)), // 先允许数字和小数点 DecimalTextInputFormatter(), // 应用自定义逻辑 ], keyboardType: TextInputType.numberWithOptions(decimal: true), // 数字键盘带小数点 ) ``` 改进点： - 先使用FilteringTextInputFormatter.allow(RegExp(r&#39;[0-9.]&#39;))来只允许数字和小数点输入。 - 然后应用自定义formatter处理精细规则。 - 在自定义formatter中，处理小数点重复、小数位长度、首位0问题。 首位0问题： - 允许"0"或"0.12"，但不允许"012"。 - 在formatEditUpdate中检查：if (newValue.text.startsWith(&#39;0&#39;) && newValue.text.length > 1 && !newValue.text.startsWith(&#39;0.&#39;))，则返回oldValue。 正则检查：使用RegExp(r&#39;^[0-9]*\.?[0-9]*$&#39;)来确保只包含数字和小数点，但前面的Filtering应该已经处理了，所以要确保。 集成多个formatters。 现在，构建回答： 1. 介绍需求和方法。 2. 提供自定义TextInputFormatter代码。 3. 展示如何在TextField中使用。 4. 解释关键逻辑。 5. 生成相关问题。 相关问题： - 如何限制输入框只能输入整数？ - 如何处理更多的小数位限制？ - 如何自定义键盘类型？ - 如何验证输入值？ 确保回答真实可靠：基于Flutter文档和常见实践。 </think>### Flutter实现输入框限制只能输入数字且小数点最多两位的方法 在Flutter中，要实现输入框只能输入数字（0-9）和小数点（.），并限制小数点后最多两位，可以使用`TextInputFormatter`结合自定义逻辑来处理。这种方法通过过滤输入、验证小数点唯一性和小数位长度来确保用户输入符合要求。下面我将逐步解释实现方法，并提供完整的代码示例。 #### 核心实现步骤 1. **导入必要包**：使用`package:flutter/services.dart`中的`TextInputFormatter`相关类。 2. **定义自定义TextInputFormatter**：创建一个类继承自`TextInputFormatter`，在`formatEditUpdate`方法中添加逻辑： - 检查小数点是否唯一（不能有多个小数点）。 - 限制小数点后最多两位数字。 - 处理首位不为0的问题（允许"0."但禁止"012"等无效输入）。 3. **在TextField中使用**：将自定义formatter添加到`inputFormatters`列表中，并设置`keyboardType`为数字键盘。 4. **添加基础过滤**：先用`FilteringTextInputFormatter.allow(RegExp(r&#39;[0-9.]&#39;))`确保只允许数字和小数点输入。 #### 完整代码示例 以下是实现该功能的Dart代码，包含自定义formatter和TextField集成： ```dart import &#39;package:flutter/material.dart&#39;; import &#39;package:flutter/services.dart&#39;; // 自定义TextInputFormatter：限制只能输入数字、小数点，小数点最多两位 class DecimalTextInputFormatter extends TextInputFormatter { @override TextEditingValue formatEditUpdate( TextEditingValue oldValue, TextEditingValue newValue) { // 检查输入是否为空 if (newValue.text.isEmpty) { return newValue; } // 1. 禁止首位为0且后面紧跟数字（如"012"），但允许"0."或"0.1" if (newValue.text.startsWith(&#39;0&#39;) && newValue.text.length > 1 && !newValue.text.startsWith(&#39;0.&#39;)) { return oldValue; // 返回旧值，阻止无效输入 } // 2. 检查是否有多个小数点（indexOf和lastIndexOf不一致表示有重复） if (newValue.text.indexOf(&#39;.&#39;) != newValue.text.lastIndexOf(&#39;.&#39;)) { return oldValue; // 返回旧值，阻止多个小数点 } // 3. 检查小数点后位数是否超过2位 final dotIndex = newValue.text.indexOf(&#39;.&#39;); if (dotIndex != -1) { final decimalPart = newValue.text.substring(dotIndex + 1); if (decimalPart.length > 2) { return oldValue; // 返回旧值，阻止小数位超过2位 } } // 4. 确保输入只包含数字和小数点（正则过滤） if (!RegExp(r&#39;^[0-9]*\.?[0-9]*$&#39;).hasMatch(newValue.text)) { return oldValue; // 返回旧值，阻止非法字符 } return newValue; // 输入有效，返回新值 } } // 在TextFormField中使用示例 class NumberInputField extends StatelessWidget { @override Widget build(BuildContext context) { return TextFormField( keyboardType: TextInputType.numberWithOptions(decimal: true), // 数字键盘带小数点 inputFormatters: [ FilteringTextInputFormatter.allow(RegExp(r&#39;[0-9.]&#39;)), // 基础过滤：只允许数字和小数点 DecimalTextInputFormatter(), // 应用自定义逻辑 ], decoration: InputDecoration( labelText: &#39;输入金额（小数点后最多两位）&#39;, border: OutlineInputBorder(), ), // 可选：添加验证逻辑（例如在表单提交时） validator: (value) { if (value == null || value.isEmpty) { return &#39;请输入数字&#39;; } return null; }, ); } } ``` #### 关键逻辑解释 - **小数点唯一性检查**：使用`newValue.text.indexOf(&#39;.&#39;) != newValue.text.lastIndexOf(&#39;.&#39;)`确保输入中只有一个小数点。如果重复，返回旧值[^1]。 - **小数点后位数限制**：通过`substring`截取小数点后部分，检查长度是否超过2位（例如"1.123"会被阻止）。 - **首位0处理**：允许"0."或"0.12"，但禁止"012"（通过`startsWith(&#39;0&#39;) && !startsWith(&#39;0.&#39;)`实现）。 - **正则基础过滤**：`FilteringTextInputFormatter.allow(RegExp(r&#39;[0-9.]&#39;))`确保输入只包含数字和小数点，防止字母等非法字符[^2]。 - **键盘优化**：`keyboardType: TextInputType.numberWithOptions(decimal: true)`显示带小数点的数字键盘，提升用户体验[^3]。 #### 注意事项 - **性能考虑**：自定义formatter在输入时实时校验，不影响性能。 - **边缘情况处理**：代码已处理空输入、单一输入（如"0"）、和小数点开头（如".12"）的情况。 - **集成到项目**：将`DecimalTextInputFormatter`类复制到您的项目中，无需额外依赖。 - **测试建议**：输入值如"123"、"0.12"、"12.34"会通过；"12.345"、"1.2.3"或"abc"会被阻止。 此方法基于Flutter官方推荐实践，结合了输入过滤和动态验证，确保输入安全且用户友好[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值