flutter - 颤振：最大长度不适用于文本字段

Question

我正在创建自己的 PinCode Widget，基本上当我按下按钮时，按钮的值将传递给 TextField。例如，如果我按下按钮“1”，它会将值“1”传递给 TextField。

我有配置 Maxlength = 4 的 TextField。问题是当我写超过 4 时它仍然在写并且不会阻止它写 TextField。

我做错了吗？

编辑

我尝试使用它但不阻止写入。

TextFormField(
      inputFormatters: [
        LengthLimitingTextInputFormatter(4),
      ]
    )

这是我的代码

class _PinCodeScreenState extends State<PinCodeScreen> {

  TextEditingController _pinCodeController = TextEditingController();
  bool _obsecureToggle = false;
  @override
  void dispose() {
    _pinCodeController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    double mqHeight = MediaQuery.of(context).size.height;
    double mqWidth = MediaQuery.of(context).size.width;
    final textTheme = Theme.of(context).textTheme;
    return Scaffold(
      backgroundColor: Theme.of(context).primaryColor,
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Flexible(
              flex: 4,
              child: Container(
                height: double.infinity,
                child: TextFormField(
                  maxLengthEnforced: true,
                  maxLength: 4,
                  textAlign: TextAlign.center,
                  controller: _pinCodeController,
                  readOnly: true,
                  decoration: InputDecoration(
                    border: InputBorder.none,
                  ),
                  style: textTheme.display3
                      .copyWith(color: Colors.white, letterSpacing: 40),
                ),
              ),
            ),
            Flexible(
              flex: 14,
              child: Container(
                height: double.infinity,
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey, width: .5),
                  borderRadius: BorderRadius.circular(30),
                ),
                child: Wrap(
                  alignment: WrapAlignment.spaceEvenly,
                  spacing: 4,
                  children: _listPinCodeNumber
                      .map(
                        (f) => ButtonPinCode(
                          child: f.number == "backspace"
                              ? Icon(Icons.backspace)
                              : Text(
                                  f.number == "backspace" ? "<" : f.number,
                                  style: textTheme.display1
                                      .copyWith(color: Colors.black),
                                ),
                          mediaQueryHeight: mqHeight,
                          mediaQueryWidth: mqWidth,
                          onPressed: () => _actionPinCode("${f.number}"),
                        ),
                      )
                      .toList(),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  _actionPinCode(parameter) {
    switch (parameter) {
      case "backspace":
        setState(() {
          if (_pinCodeController.text.length <= 1) {
            _pinCodeController.text = "";
            print(_pinCodeController.text);
          } else {
            _pinCodeController.text = _pinCodeController.text
                .substring(0, (_pinCodeController.text.length - 1));
            print(_pinCodeController.text);
          }
        });
        break;
      default:
        setState(() {
          if (_pinCodeController.text.length != 0) {
            _pinCodeController.text += parameter;
            print(_pinCodeController.text);
          } else {
            _pinCodeController.text = parameter;
            print(_pinCodeController.text);
          }
        });
    }
  }
}

标签： flutterdart

Answer 1

尝试这个

 TextFormField(
      maxLength: 4,
      inputFormatters: [
         LengthLimitingTextInputFormatter(4),],
      textAlign: TextAlign.center,
      controller: _pinCodeController,
      readOnly: true,
      decoration: InputDecoration(
            border: InputBorder.none,
            hintText: '',
            counterStyle: TextStyle(color: Colors.black)
           ),
      style: TextStyle(color: Colors.black, letterSpacing: 40),
        ),