Question

我确实设法使代码没有错误，但是无法验证表单并显示错误消息。我有3个dart组件代码，分别是密码，输入字段和按钮。图书馆里还有一只飞镖。 ..................

import 'package:flutter_auth/Screens/Login/components/background.dart';
import 'package:flutter_auth/Screens/Login/components/uploadpage.dart';
import 'package:flutter_auth/components/rounded_button.dart';
import 'package:flutter_auth/components/rounded_input_field.dart';
import 'package:flutter_auth/components/rounded_password_field.dart';

class Body extends StatelessWidget {
  const Body({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Background(
      child: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "LOGIN",
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            SizedBox(height: size.height * 0.03),
            RoundedInputField(
              hintText: "Username",
              keyboardType: TextInputType.emailAddress,
              validator: (value) {
                if (value.length == 0)
                  return "Please enter email";
                else if (!value.contains("@"))
                  return "Please enter valid email";
                else
                  return null;
              },
              onChanged: (value) {},
            ),
            PasswordField(
              onSaved: (value) {},
            ),
            RoundedButton(
              text: "LOGIN",
              press: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => SecondScreen()),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  goBackToPreviousScreen(BuildContext context) {
    Navigator.pop(context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Home Page"),
          actions: <Widget>[
            IconButton(
              icon: Icon(
                Icons.upload_file,
                color: Colors.white,
              ),
              onPressed: () {
                {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => uploadpage()),
                  );
                } // do something
              },
            )
          ],
        ),
        body: Stack(fit: StackFit.expand, children: <Widget>[
          Positioned(
            bottom: 0,
            width: MediaQuery.of(context).size.width,
            child: Center(
              child: RaisedButton(
                  color: Colors.purple[400],
                  textColor: Colors.white,
                  onPressed: () {
                    goBackToPreviousScreen(context);
                  },
                  child: Text('Logout')),
            ),
          )
        ]));
  
}

Answer 1

这是表单如何工作的基本示例：

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  GlobalKey<FormState> formKey = new GlobalKey();

  String formFieldValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Form(
        key: formKey,
        child: Column(
          children: [
            TextFormField(
              validator: (input) {
                if (input.isEmpty) {
                  return 'Please type something';
                }
                return null;
              },
              onSaved: (input) => formFieldValue = input,
            ),
            RaisedButton(
              onPressed: submitForm,
              child: Text(
                'Submit'
              ),
            )
          ],
        ),
      )
    );
  }

  submitForm() {
    final formState = formKey.currentState;
    if (formState.validate()) {
      formState.save();
      // then do something
    }
  }

}

Answer 2

此处验证器不会自动被调用。您必须手动按下按钮或其他东西来调用它。

在这里，您需要将列包装在Form小部件中并给它一个密钥。按下后，您需要通过调用key.currentState.validate（）

对其进行验证

    final _formreg = GlobalKey<FormState>();
        Form(key:_formreg, child:Column(children:
                   [RoundedInputField() ]
               ));
RaisedButton(onPressed:()=> {
a=_formreg.currentState.validate();
} )

a是一个布尔值

如何在表单中添加验证内容

2 个答案: