flutter - 如何知道用户何时删除 VerificationCodeInput Flutter 中的输入

Question

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

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

标签： flutterflutter-layout

Answer 1

您可以转到源代码https://github.com/tiny-express/flutter_verification_code_input并查看开发人员制作的代码 - 未提供您想要的逻辑。

因此，您可以分叉这个包并自己实现您需要的东西。

只是一个例子，我做了一个 fork 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

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