论坛 › 技术博文 › flutter通过TextInputFormatter实现限制数字输入

乳此美丽 发表于 2023-3-13 23:22:47

flutter通过TextInputFormatter实现限制数字输入

背景
在开发中经常会遇到需要对输入的数字限制的需求，比如限制输入几位小数，或者只能输入整数，或者支持负数。。。


实现类

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
/*
* @Author: zhudaihao
* @Date: 2022/2/25
* @Describe: 限制输入数字和小数后位数
*/
class NumberInputLimit extends TextInputFormatter {
///输入字符的范围
String inputScope;

///允许的小数位数
final int? digit;

///允许的最大值
final double? max;

///是否支持 false不支持负数(默认不支持)
final bool isNegative;

NumberInputLimit({
    this.inputScope = '-.0123456789',
    this.digit,
    this.max,
    this.isNegative = false,
});

///获取value小数点后有几位
static int getDecimalAfterLength(String value) {
    if (value.contains(".")) {
      return value.split(".").length;
    } else {
      return 0;
    }
}

@override
TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    //上次文本
    String oldContent = oldValue.text;
    //最新文本
    String newContent = newValue.text;
    //上次文本长度
    int oldLength = oldContent.length;
    //最新文本长度
    int newLength = newContent.length;
    //上次文本光标位置
    int oldBaseOffset = oldValue.selection.baseOffset;
    //最新文本光标位置
    int newBaseOffset = newValue.selection.baseOffset;
    //光标位置
    int offset = newBaseOffset;

    if (newLength > oldLength) {
      //输入的字符
      String inputContent = newContent.substring(oldBaseOffset, newBaseOffset);
      if (!isNegative) {
      inputScope = inputScope.replaceAll("-", "");
      }
      if (inputScope.contains(inputContent)) {
      if (oldLength > 0) {
          if ((max != null && double.parse(newContent) > max!) ||
            (digit != null && getDecimalAfterLength(newContent) > digit!)) {
            newContent = oldContent;
            offset = oldBaseOffset;
          } else if (oldContent.substring(0, 1) == "-") {
            //上次文本首字符是-
            if ((oldContent.contains(".") && inputContent == ".") ||
                inputContent == "-" ||
                (oldContent.contains(".") &&
                  newLength > 2 &&
                  newContent.substring(2, 3) != "." &&
                  newContent.substring(1, 2) == "0") ||
                (newLength > 2 && newContent.substring(0, 3) == "-00") ||
                (newLength > 2 &&
                  !newContent.contains(".") &&
                  newContent.substring(1, 2) == "0") ||
                (oldContent.substring(0, 1) == "-" &&
                  newContent.substring(0, 1) != "-")) {
            newContent = oldContent;
            offset = oldBaseOffset;
            }
          } else if (oldContent.substring(0, 1) == "0") {
            //上次文本首字符是0
            if (newLength > 1 && newContent.substring(0, 2) == "00" ||
                (newContent.contains("-") &&
                  newContent.substring(0, 1) != "-") ||
                (oldContent.contains(".") && inputContent == ".") ||
                (newContent.substring(0, 1) == "0" &&
                  newLength > 1 &&
                  newContent.substring(1, 2) != ".")) {
            newContent = oldContent;
            offset = oldBaseOffset;
            }
          } else if (newContent.contains(".")) {
            //上次文本首字符是.
            if ((oldLength > 1 &&
                oldContent.substring(0, 2) == "0." &&
                inputContent == ".") ||
                (newContent.substring(0, 1) != "-" &&
                  newContent.contains("-")) ||
                (oldContent.contains(".") && inputContent == ".") ||
                (oldContent.contains(".") &&
                  oldContent.substring(0, 1) != "." &&
                  newContent.substring(0, 1) == "0")) {
            newContent = oldContent;
            offset = oldBaseOffset;
            }
          }
      }
      } else {
      //输入限制范围外字符
      newContent = oldContent;
      offset = oldBaseOffset;
      }
    }

    return TextEditingValue(
      text: newContent,
      selection: TextSelection.collapsed(offset: offset),
    );
}
}


使用代码
Scaffold(
appBar: AppBar(
    title: const Text("测试编辑限制"),
),
body: Material(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
      const Text("不限制"),
      Padding(
          padding: const EdgeInsets.all(8.0),
          child: TextField(
            decoration: const InputDecoration(hintText: "请输入"),
            inputFormatters: [
            NumberInputLimit(),
            ],
          ),
      ),
      const Text("支持负数"),
      Padding(
          padding: const EdgeInsets.all(8.0),
          child: TextField(
            decoration: const InputDecoration(hintText: "请输入"),
            inputFormatters: [
            //限制小数位数
            NumberInputLimit(
                isNegative: true,
            ),
            ],
          ),
      ),
      const Text("限制输入最大值100"),
      Padding(
          padding: const EdgeInsets.all(8.0),
          child: TextField(
            decoration: const InputDecoration(hintText: "请输入"),
            inputFormatters: [
            //限制小数位数
            NumberInputLimit(
                max: 100,
            ),
            ],
          ),
      ),
      const Text("限制输入小数点2位"),
      Padding(
          padding: const EdgeInsets.all(8.0),
          child: TextField(
            decoration: const InputDecoration(hintText: "请输入"),
            inputFormatters: [
            //限制小数位数
            NumberInputLimit(
                digit: 2,
            ),
            ],
          ),
      ),
      const Text("限制输入所有字符范围"),
      Padding(
          padding: const EdgeInsets.all(8.0),
          child: TextField(
            decoration: const InputDecoration(hintText: "请输入"),
            inputFormatters: [
            //限制小数位数
            NumberInputLimit(
                inputScope: "123456",
            ),
            ],
          ),
      ),
      ],
    ),
),
)

sxx111 发表于 2023-3-15 08:28:17

1111111111111111

sxx111 发表于 2023-3-26 08:30:19

44444444444444444

查看完整版本: flutter通过TextInputFormatter实现限制数字输入