如何使用 Flutter 形式的 AutovalidateMode 实现最佳 UX

Question

我正在尝试使用 Flutter 实现最佳的 UX AutovalidateMode.onUserInteraction。

选项1

当我在表单键上设置验证时，当用户尝试输入一个 texField 时，整个表单会变成红色并出现错误。

 child: Form(
              key: _formKey,
              autovalidateMode: AutovalidateMode.onUserInteraction,

选项2

当我 AutovalidateMode.onUserInteraction在每个文本字段上设置时，当用户尝试键入时，我最终会在每个文本字段上收到错误，并且当他们完成输入时错误会消失。

 RoundedPasswordResetField(
                                validator: (value) {
                                  if (value.isEmpty) {
                                        return 'Please Re-enter Password';
                                      }
                                      if (password != confirmpassword) {
                                        return "Password does not match";
                                      }
                                      //
                                      return null;
                                    },
                                    autovalidateMode: AutovalidateMode.onUserInteraction,
                                    hintText: "Please Re-enter Password",
                                    onChanged: (value) {
                                      confirmpassword = value;
                                    },
                                  ),

选项3

当我将其设置为 时autovalidateMode: AutovalidateMode.disabled,，当用户尝试在字段为空时提交字段时，会出现错误，但是当他们键入特定的正确详细信息时，错误不会清除

 RoundedPasswordResetField(
                                        validator: (value) {
                                          if (value.isEmpty) {
                                            return 'Please Re-enter Password';
                                          }
                                          if (password != confirmpassword) {
                                            return "Password does not match";
                                          }
                                          //
                                          return null;
                                        },
                                        autovalidateMode: AutovalidateMode.disabled,
                                        hintText: "Please Re-enter Password",
                                        onChanged: (value) {
                                          confirmpassword = value;
                                        },
                                      ),

我如何使用setState，以便当用户开始输入时不会立即显示错误，并在用户完成输入错误详细信息时显示 - 并实现最佳用户体验？

Answer 1

这是我两年前在我的一个 Android 项目中实现的。虽然是Kotlin，但我还是打开Github找了一下。

首先，让我们理解你的问题：问题说Autovalidate模式不应该存在或者应该保留为默认值（AutovalidateMode.disabled），以便在用户开始输入时不进行验证，这显然是一个糟糕的用户体验。但是，它应该仅在用户停止足够的延迟以将其视为完成输入之后才起作用，这意味着输入数据流中出现短暂的停止。

现在，为此，PublishProcessor.debounce()RxJava 在 Kotlin 中是一个不错的选择，它可以在 dart 中使用rxdart. 它的作用是防止函数连续执行，并且仅在一定延迟后执行该函数，如果再次触发该函数，则会重置延迟。因此，该函数仅执行一次，并且仅在一定的延迟后模仿用户停止打字的效果。

使用这个 - Just Debounce It包，它不像 RxDart 那样过度杀伤，但仍然有很多替代方案。

将其实现为

void function validateForm() {
  Debounce.seconds(2, //2 means run this function only after 2 second delay.
    () => formKey.currentState.validate()) //This is a function passed as a Callback which is executed only when it crosses the delay.
}

并从 as 调用此函数onChanged：

onChanged: (val) => validateForm()

就是这样。现在，只有当用户停止输入时，您的表单才会被验证。这是首选方法，不仅有良好的用户体验，而且有良好的逻辑。有一些技巧可以使其工作booleans，postDelayed但这是糟糕的代码。