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

Question

验证运行良好，但万一验证错误，选择选项的选项被禁用。

                                      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;
                                        },
                                      ),

上面的代码是在页面 View 中，
我的变量

  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>(),
    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,
                      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(
                                    color: buttonColor,
                                    shape: RoundedRectangleBorder(
                                      borderRadius:
                                          BorderRadius.circular(10.0),
                                    ),
                                    child: Text(
                                      'Next',
                                      style: TextStyle(
                                        color: Colors.white,
                                        fontWeight: FontWeight.w400,
                                      ),
                                    ),
                                    onPressed: () => changePage(),
                                  ),
            ],
          ),
        ),
      ),
    );

Answer 1

查看您的代码，我强烈建议您创建 3 个不同的 Form s 并分别验证它们，因此您对表单状态没有任何问题。为此，您只需将字段包装到各自的 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(
                //
                // ),
                RaisedButton(
                  child: Text('Next'),
                  onPressed: () => changePage(_page2),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}