如何在下拉菜单项上单击侦听器

Question

我已经构建了DropdownMenuItem的代码，现在当我从下拉菜单项中单击一个项目时，它应该移动到另一个屏幕。下面是代码

class TimesScreen extends StatefulWidget {
  @override
  _TimesScreenState createState() => _TimesScreenState();
}
class _TimesScreenState extends State<TimesScreen> {
  var gender;
@override
  Widget build(BuildContext context) {
DropdownButton(
                     hint: Text("Select",
                     style: TextStyle(color: Colors.white),),
                     onChanged: (val){
                         setState(() {
                           this.gender=val;
                         });
                     },
                     value: this.gender,
                     items: [
                       DropdownMenuItem(
                         //onTap:
                         value: 'Earth',
                         child: Text('Earth'
                        ),
                       ),
                       DropdownMenuItem(
                        //onTap:
                         value: 'Mars',
                         child: Text('Mars'
                        ),
                       ),)]

Answer 1

您可以使用GestureDetector包装您的Text小部件，该小部件具有可用于执行所需代码的onTap函数。有关更多详细信息，请查看以下内容：https://api.flutter.dev/flutter/widgets/GestureDetector-class.html

这应该有效：

DropdownMenuItem(
    value: 'Earth',
    child: GestureDetector(
      onTap: () {
        // navigate code...
      },
      child: Text('Earth')
    ),
),

Answer 2

应用 fayeed 的解决方案后，我注意到这只会使下拉列表中的文本可点击。要解决此问题，您只需使用 DropdownButton.onChanged .

完整小部件：

class TimesScreen extends StatefulWidget {
  @override
  _TimesScreenState createState() => _TimesScreenState();
}
class _TimesScreenState extends State<TimesScreen> {
  var gender;
  @override
  Widget build(BuildContext context) {
    return DropdownButton(
      hint: Text("Select"),
      value: this.gender,
      items: [
        DropdownMenuItem(value: 'Earth', child: Text('Earth')),
        DropdownMenuItem(value: 'Mars', child: Text('Mars')),
      ],
      onChanged: (val) {
        setState(() {
          this.gender = val;
        });
        switch (val) {
          case 'Earth':
            Navigator.pushNamed(context, '/earth_target_page');
            break;
          case 'Mars':
            Navigator.pushNamed(context, '/mars_target_page');
            break;
        }
      },
    );
  }
}