Flutter下拉列表，在验证错误时选择被禁用

问题描述

验证工作正常，但是如果验证错误，则不能选择on选项。

                                      DropdownButtonFormField(
                                        isExpanded: true,hint: Text('Gender'),value: _selectedGender,onChanged: (newValue) {
                                          setState(() {
                                            _selectedGender = newValue;
                                          });
                                        },items: _gender.map((gender) {
                                          return DropdownMenuItem(
                                            child: new Text(gender),value: gender,);
                                        }).toList(),validator: (value) {
                                          if (value == null)
                                            return "Please select your gender";
                                          return null;
                                        },),

以上代码位于页面视图中，

我的变量

  List<String> _gender = ['Male','Female'];
  String _selectedGender;

我的整个表单代码：只是将很长的一个字段简化为一个字段

class SignUp extends StatefulWidget {
  @override
  _SignUpState createState() => _SignUpState();
}

class _SignUpState extends State<SignUp> {
  final List<GlobalKey<FormState>> _page = [
    GlobalKey<FormState>(),GlobalKey<FormState>(),];

  final _key = GlobalKey<ScaffoldState>();
  
 
  List<String> _gender = ['Male','Female'];
  String _selectedGender;

    void changePage() {
    if (currentPageValue < 3) {
      if (_page[currentPageValue].currentState.validate()) {
        setState(() {
          currentPageValue += 1;
        });
      }
    }
  }
  


  @override
  Widget build(BuildContext context) {
    var deviceSize = MediaQuery.of(context).size;
    var deviceWidth = deviceSize.width;

    return Scaffold(
      key: _key,backgroundColor: _backgroundColor,appBar: AppBar(
        backgroundColor: _backgroundColor,leading: IconButton(
            icon: Icon(
              currentPageValue == 0 ? Icons.close : Icons.keyboard_backspace,size: 20.0,color: _headerColor,onpressed: currentPageValue == 0
                ? () => Navigator.pop(context)
                : () => back()),centerTitle: true,elevation: 0.0,body: Form(
        key: _page[0],child: Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[
             
                Container(
                  width: deviceWidth * 0.9,height: dropDownHeight,child: ButtonTheme(
                    child: DropdownButtonFormField(
                      isExpanded: true,onChanged: (newValue) {
                        setState(() {
                          _selectedGender = newValue;
                        });
                      },items: _gender.map((gender) {
                        return DropdownMenuItem(
                          child: new Text(gender),);
                      }).toList(),validator: (value) {
                        if (value == null) return "Please select your gender";
                        return null;
                      },RaisedButton(
                                    color: buttonColor,shape: RoundedRectangleBorder(
                                      borderRadius:
                                          BorderRadius.circular(10.0),child: Text(
                                      'Next',style: TextStyle(
                                        color: Colors.white,fontWeight: FontWeight.w400,onpressed: () => changePage(),],);

解决方法

查看您的代码，强烈建议您创建3个不同的Form并分别对其进行验证，因此在表单状态方面没有任何问题。为此，您只需将字段包装在各自的Form中，并确保不要混合使用表单，也不要将它们放在另一个表单中。

下面是一个基于您的代码和我所说的例子：

class SignUp extends StatefulWidget {
  @override
  _SignUpState createState() => _SignUpState();
}

class _SignUpState extends State<SignUp> {
  final _page1 = GlobalKey<FormState>();
  final _page2 = GlobalKey<FormState>();
  final _page3 = GlobalKey<FormState>();

  final _key = GlobalKey<ScaffoldState>();
  
  int currentPageValue;

  List<String> _gender = ['Male','Female'];
  String _selectedGender;

  void changePage(GlobalKey<FormState> page) {
    if (currentPageValue < 3) {
      if (page.currentState.validate()) {
        setState(() {
          currentPageValue += 1;
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _key,body: ListView(
        children: <Widget>[
          Form(
            key: _page1,child: Column(
              children: [
                DropdownButtonFormField(
                  isExpanded: true,hint: Text('Gender'),value: _selectedGender,onChanged: (newValue) {
                    setState(() {
                      _selectedGender = newValue;
                    });
                  },items: _gender.map((gender) {
                    return DropdownMenuItem(
                      child: new Text(gender),value: gender,);
                  }).toList(),validator: (value) {
                    if (value == null) return "Please select your gender";
                    return null;
                  },),RaisedButton(
                  child: Text('Next'),onPressed: () => changePage(_page1),],Form(
            key: _page2,child: Column(
              children: [
                // SomeField(
                //
                // ),// SomeOtherField(
                //
                // ),onPressed: () => changePage(_page2),);
  }
}