Question

我想在我的应用中输入验证码。我正在使用this widget来做到这一点。但是我不知道如何检测用户在完全输入小部件后是否删除他/她输入的号码，因此我可以禁用提交按钮。我做了以下。我如何知道用户在字段中完全输入后是否删除他/她输入的号码？谢谢！

VerificationCodeInput(
 keyboardType: TextInputType.number,
 length: 4,
 onCompleted: (String value) {
  setState(() {
   full = true;
  });
 },
),

Answer 1

您可以转到源https://github.com/tiny-express/flutter_verification_code_input，并在代码开发人员中查看-未提供所需的逻辑。

因此，您可以分叉此程序包并自行实现所需的功能。

仅举一个例子，我制作了分叉https://github.com/awaik/flutter_verification_code，在其中实现了另一项检查以进行编辑。

它的工作原理与所附屏幕相同。

要在代码中实现它，应使用此新软件包更改pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  flutter_verification_code: ^0.1.4

在代码中，您可以像这样使用它

  body: Column(
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: Text(
            'Enter your code',
            style: TextStyle(fontSize: 20.0),
          ),
        ),
      ),
      VerificationCodeInput(
        keyboardType: TextInputType.number,
        length: 4,
        autofocus: false,
        onCompleted: (String value) {
          print(value);
          setState(() {
            _code = value;
          });
        },
        onEditing: (bool value) {
          setState(() {
            _onEditing = value;
          });
        },
      ),
      (_onEditing != true)
          ? Padding(
              padding: const EdgeInsets.all(8.0),
              child: Center(
                child: Text(
                  'Your code: $_code',
                ),
              ),
            )
          : Container(
              child: Text(
                'Please enter full code',
              ),
            ),
    ],

完整示例https://pub.dev/packages/flutter_verification_code

（当然要感谢原始开发人员）

如何知道用户何时删除VerificationCodeInput Flutter

1 个答案: