Question

我是Flutter的新手。我有多个ExpansionTiles。我想验证ExpansionTile中的TextFormFields。用户直接单击“提交”按钮时，不会验证TextFormFields并提交。
这是我的代码

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final GlobalKey<FormState> _formkey = GlobalKey();
  TextEditingController _email=TextEditingController();
  TextEditingController _address=TextEditingController();
  TextEditingController _userName=TextEditingController();
  TextEditingController _mobile=TextEditingController();
  bool _userNameAutoValidate = false;
  bool _emailAutoValidate = false;
  bool _addressAutoValidate = false;
  bool _mobileAutoValidate = false;
  void _submit(){
     if (!_formkey.currentState.validate()) {
        return;
      }
    _formkey.currentState.save();
    print("_userName = ${_userName.text}");
    print("_email = ${_email.text}");
    print("_address = ${_address.text}");
    print("_mobile = ${_mobile.text}");
  }
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Expansion Form Example",
      home: Scaffold(
        appBar: AppBar(
          title: Text('Expansion Form Example'),
        ),floatingActionButton: FloatingActionButton(
        child: Text("Submit"),
        onPressed: () {
          _submit();
        },
      ),
        body: Center(
          child: Form(
            key: _formkey,
            child: ListView(
              children: <Widget>[
                ExpansionTile(
                  title: Text("User Info"),
                  children: <Widget>[
                    Focus(
                      onFocusChange: (value) {
                        if (!value) {
                          setState(() {
                            _userNameAutoValidate = true;
                          });
                        }
                      },
                      child: TextFormField(
                        autovalidate: _userNameAutoValidate,
                        controller: _userName,
                        textInputAction: TextInputAction.next,
                        decoration: InputDecoration(
                            hintText: "enter user name",
                            labelText: "User Name",
                            border: OutlineInputBorder()),
                        validator: (value) {
                          if (value.isEmpty) {
                            return "User Name field cannot be empty.";
                          }
                          return null;
                        },
                      ),
                    ),
                    Focus(
                      onFocusChange: (value) {
                        if (!value) {
                          setState(() {
                            _emailAutoValidate = true;
                          });
                        }
                      },
                      child: TextFormField(
                        autovalidate: _emailAutoValidate,
                        controller: _email,
                        textInputAction: TextInputAction.next,
                        decoration: InputDecoration(
                            hintText: "enter email",
                            labelText: "Email",
                            border: OutlineInputBorder()),
                        validator: (value) {
                          if (value.isEmpty) {
                            return "Email field cannot be empty.";
                          }
                          return null;
                        },
                      ),
                    ),
                  ],
                ),
                ExpansionTile(
                  title: Text("Address Info"),
                  children: <Widget>[
                    Focus(
                      onFocusChange: (value) {
                        if (!value) {
                          setState(() {
                            _addressAutoValidate = true;
                          });
                        }
                      },
                      child: TextFormField(
                        autovalidate: _addressAutoValidate,
                        controller: _address,
                        textInputAction: TextInputAction.next,
                        decoration: InputDecoration(
                            hintText: "enter address",
                            labelText: "Address",
                            border: OutlineInputBorder()),
                        validator: (value) {
                          if (value.isEmpty) {
                            return "Address field cannot be empty.";
                          }
                          return null;
                        },
                      ),
                    ),
                  ],
                ),
                ExpansionTile(
                  title: Text("Other Info"),
                  children: <Widget>[
                    Focus(
                      onFocusChange: (value) {
                        if (!value) {
                          setState(() {
                            _mobileAutoValidate = true;
                          });
                        }
                      },
                      child: TextFormField(
                        autovalidate: _mobileAutoValidate,
                        controller: _mobile,
                        textInputAction: TextInputAction.next,
                        decoration: InputDecoration(
                            hintText: "enter mobile number",
                            labelText: "Mobile Number",
                            border: OutlineInputBorder()),
                        validator: (value) {
                          if (value.isEmpty) {
                            return "Mobile Number cannot be empty.";
                          }
                          return null;
                        },
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

在ExpansionTile关闭时如何验证TextFormFields。

如何手动进行？

请帮助我。
谢谢

Answer 1

以前，扩展图块默认情况下不维护状态。这是解决此问题https://github.com/flutter/flutter/pull/57172/files的PR。

因此，您需要传递maintainState: true来维持扩展图块下的状态。即使平铺瓦楞，它也会验证表格。

如何在Flutter中验证ExpansionTile中的TextFormField？

1 个答案: