Flutter Form Autovalidate 首次触发

Question

第一次启动应用程序时出现错误，所有文本字段都在验证，但一定不是这样的，我从 flutter 文档中获取了表单示例，并添加了 autovalidate:true，表面上在网络上它可以工作，但带有物理设备和模拟器无法正常工作，错误和代码如下

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   final appTitle = 'Form Validation Demo';

   return MaterialApp(
    title: appTitle,
    home: Scaffold(
     appBar: AppBar(
       title: Text(appTitle),
     ),
     body: MyCustomForm(),
   ),
  );
 }
}

class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}


class MyCustomFormState extends State<MyCustomForm> {

 final _formKey = GlobalKey<FormState>();

 @override
 Widget build(BuildContext context) {

  return Form(
    autovalidate:true,
    key: _formKey,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        TextFormField(
          validator: (value) {
            if (value.isEmpty) {
              return 'Please enter some text';
            }
            return null;
          },
        ),
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 16.0),
          child: RaisedButton(
            onPressed: () {                
              if (_formKey.currentState.validate()) {  
                Scaffold.of(context)
                  .showSnackBar(SnackBar(content: Text('Processing Data')));
              }
            },
            child: Text('Submit'),
          ),
        ),
      ],
    ),
  );
 }
}

Answer 1

要 第一次停止自动验证，我们应该使用autovalidateMode: AutovalidateMode.onUserInteraction， 而不是autovalidate=true。由于autovalidate已被弃用。所以像这样使用：-

将 GlobalKey 定义为：

final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

在脚手架上使用这个。

child: new Form(
              key: _formKey,
              autovalidateMode: AutovalidateMode.onUserInteraction,
              child: FormUI(),
            ),

Answer 2

您必须创建一个 autoValidate bool 变量，默认情况下为 false，因此不会显示验证消息。当用户按下提交按钮时，它将检查验证，如果无效，则会将 autoValidate 变量设置为 true 并显示验证错误。它将一旦用户克服验证问题，就会自动验证，否则它将正常提交表单。

class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}


class MyCustomFormState extends State<MyCustomForm> {

  final _formKey = GlobalKey<FormState>();
  bool _autoValidate=false;
  @override
  Widget build(BuildContext context) {

    return Form(
      autovalidate:_autoValidate,
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextFormField(
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: RaisedButton(
              onPressed: () {
                if (_formKey.currentState.validate()) {
                  Scaffold.of(context)
                      .showSnackBar(SnackBar(content: Text('Processing Data')));
                }else{
                  setState(() {
                    _autoValidate=true;
                  });
                }
              },
              child: Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}