如何将多个 TextFormField 表单键链接到 FLutter 中的单个按钮？

Question

我正在尝试将多个表单键链接到一个按钮。它说没有错误，但它没有给我我想要的结果。

这是带有按钮的文件。 TextFormFields 位于不同的文件中，但已导入到此文件中。共有三个 TextFormField。第一个是询问您的姓名，第二个是询问您的出生日期，第三个是询问您的电子邮件。

import 'package:flutter/material.dart';
import 'package:flutter_application_5/account__info_input/name_submit_field.dart';
import 'package:flutter_application_5/account__info_input/email_submit_field.dart';
import 'package:flutter_application_5/account__info_input/birth_submit_field.dart';

class AccountInfoSubmitButton extends StatefulWidget {
  const AccountInfoSubmitButton({super.key});

  @override
  State<AccountInfoSubmitButton> createState() => __AccountInfoSubmitButtonState();
}

class __AccountInfoSubmitButtonState extends State<AccountInfoSubmitButton> {
bool isPressed = false;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        key : const Key('AccountInfoSubmitButton'),
        onPressed: () {
          if (formkeyname.currentState != null && formkeyname.currentState!.validate() &&
          formkeyemail.currentState != null && formkeyemail.currentState!.validate() &&
          formkeybirth.currentState != null && formkeybirth.currentState!.validate() ) {
            
            setState(() {
            
          });
          }
        },
        style: ElevatedButton.styleFrom(
          
        ), child: const Text('Submit'),
      )
    );
  }


  
}

这是包含询问您姓名的 TextFormField 的文件

import 'package:flutter/material.dart';

final formkeyname = GlobalKey<FormState>();

class NameSubmitField extends StatefulWidget {
  const NameSubmitField({super.key});

  @override
  State<NameSubmitField> createState() => _NameSubmitFieldState();
}

class _NameSubmitFieldState extends State<NameSubmitField> {

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Form(
      key: formkeyname,
          // ignore: sized_box_for_whitespace
         child: Center(
          child: Container(
            width: 350,
            height: 200,
          child: TextFormField(
            decoration: const InputDecoration(
              focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Color.fromARGB(255, 15, 156, 152)),
              ),
              hintText: 'Enter your name',
              contentPadding: EdgeInsets.symmetric(vertical: 15, horizontal: 90),
              hintStyle: TextStyle(
                color: Color.fromARGB(255, 15, 156, 152),
                fontSize: 20,
              )
            ),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please Enter Your Name';
              } else {
                return 'Name Submitted';
              }
            }
          ),
          )
          )
        ),
        ]
      );
  }
}

这是包含询问您出生日期的 TextFormField 的文件

import 'package:flutter/material.dart';

final formkeybirth = GlobalKey<FormState>();

class BirthSubmitField extends StatefulWidget {
  const BirthSubmitField({super.key});

  @override
  State<BirthSubmitField> createState() => _BirthSubmitFieldState();
}

class _BirthSubmitFieldState extends State<BirthSubmitField> {

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Form(
      key: formkeybirth,
          // ignore: sized_box_for_whitespace
         child: Center(
          child: Container(
            width: 400,
            height: 200,
          child: TextFormField(
            decoration: const InputDecoration(
              focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Color.fromARGB(255, 15, 156, 152)),
              ),
              hintText: 'Enter Your Date Of Birth',
              contentPadding: EdgeInsets.symmetric(vertical: 15, horizontal: 90),
              hintStyle: TextStyle(
                color: Color.fromARGB(255, 15, 156, 152),
                fontSize: 20,
              )
            ),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please Enter Your Date Of Birth';
              } else {
                return 'Date Of Birth Submitted';
              }
            }
          ),
          )
          )
        ),
        ]
      );
  }
}

这是包含要求您提供电子邮件的 TextFormField 的文件

import 'package:flutter/material.dart';

final formkeyemail = GlobalKey<FormState>();

class EmailSubmitField extends StatefulWidget {
  const EmailSubmitField({super.key});

  @override
  State<EmailSubmitField> createState() => _EmailSubmitFieldState();
}

class _EmailSubmitFieldState extends State<EmailSubmitField> {
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Form(
      key: formkeyemail,
          // ignore: sized_box_for_whitespace
         child: Center(
          child: Container(
            width: 350,
            height: 200,
          child: TextFormField(
            decoration: const InputDecoration(
              focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Color.fromARGB(255, 15, 156, 152)),
              ),
              hintText: 'Enter Your Email',
              contentPadding: EdgeInsets.symmetric(vertical: 15, horizontal: 90),
              hintStyle: TextStyle(
                color: Color.fromARGB(255, 15, 156, 152),
                fontSize: 20,
              )
            ),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please Enter Your Email';
              } else {
                return 'Email Submitted';
              }
            }
          ),
          )
          )
        ),
        ]
      );
  }
}
  

如果未输入任何内容，该按钮应该会导致 TextFormFields 显示（请输入“空白”）；如果不输入空白，则显示（“已提交”“空白”）。然而，这只发生在名称 TextFormField 上。该按钮忽略其他按钮。这是什么原因呢？

Answer 1

问题在于 Textfield 小部件，您正在调用 validate 属性，但如果要在 if 语句中使用它，您应该返回一个 bool 值，而您的 validate 属性返回一个字符串。

如果你想使用验证向用户显示错误消息，你可以这样做

//create a String variable
String errorMsg=null;

validator: (value) {
              if (value == null || value.isEmpty) {
                errorMsg = 'please enter your email';
                return false;
              } else {
                errorMsg 'Email Submitted';
                return true;
              }
            }