Flutter：如何使用 DropDownMenuItems 导航到新屏幕答案

【问题标题】：Flutter: How do I navigate to a new screen using DropDownMenuItemsFlutter：如何使用 DropDownMenuItems 导航到新屏幕
【发布时间】：2018-07-02 13:30:01
【问题描述】：

我希望能够在我选择 MEN 时导航到一个新屏幕，而当我选择 WOMEN 时导航到另一个屏幕。我试过了，似乎没有任何运气。网络上似乎没有这方面的内容。请问我该怎么做？

这是我的代码：

return Scaffold(
  appBar: AppBar(
    title: DropdownButtonHideUnderline(
      child: new DropdownButton(
        value: null, //Have no idea what to put here
        items: <DropdownMenuItem>[
          new DropdownMenuItem(
            child: new Text('MEN', style: style),
          ),
          new DropdownMenuItem(
            child: new Text('WOMEN', style: style),
          ),
        ],
        onChanged: null,
      ),
    ),
  ),
);

【问题讨论】：

获取selected index of dropdownbutton 并基于navigate to a new screen

标签： android dart flutter flutter-layout

【解决方案1】：

首先你应该在 DropDownMenuItem 中添加值

new DropdownMenuItem(
     value: "MEN",
      child: new Text('MEN', style: style),
),

然后在 onChanged 中，您应该检查值并管理导航。

return Scaffold(
          appBar: AppBar(
            title: DropdownButtonHideUnderline(
              child: new DropdownButton(
                value: "MEN", //Default value
                items: <DropdownMenuItem>[
                  new DropdownMenuItem(
                    value: "MEN",
                    child: new Text('MEN', style: style),
                  ),
                  new DropdownMenuItem(
                    value: "WOMEN",
                    child: new Text('WOMEN', style: style),
                  ),
                ],
                onChanged: (v) {
                  Widget widget;
                  if (v == "MEN") {
                    widget = new MenWidget();
                  } else if (v == "WOMEN") {
                    widget = new WomenWidget();
                  }
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => widget),
                  );
                },
              ),
            ),
          ),
        );

根据评论更新

要根据选择更新body，你应该使用StatefulWidget。

class DropDownButtonScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _DropDownButtonScreenState();
  }
}

class _DropDownButtonScreenState extends State<DropDownButtonScreen> {
  String ddValue;

  @override
  void initState() {
    super.initState();
    ddValue = "MEN";
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: DropdownButtonHideUnderline(
          child: new DropdownButton(
            value: ddValue, //Default value
            items: <DropdownMenuItem>[
              new DropdownMenuItem(
                value: "MEN",
                child: new Text('MEN'),
              ),
              new DropdownMenuItem(
                value: "WOMEN",
                child: new Text('WOMEN'),
              ),
            ],
            onChanged: (v) {
              ddValue = v;
              setState(() {});
            },
          ),
        ),
      ),
      body: getBody(),
    );
  }

  Widget getBody() {
    if (ddValue == "MEN") {
      return Center(child: Text("Widget for men"));
    } else if (ddValue == "WOMEN") {
      return Center(child: Text("Widget for Women"));
    }
    return Center(child: Text("Widget not found"));
  }
}

【讨论】：

谢谢。但我没有导航到新屏幕，而是尝试在 Scaffold 的主体中显示新的小部件。当我尝试这样做时，DropdownButton 上的值没有更改为选定的值，小部件也没有传递给正文显示。我该如何解决这个问题？
非常感谢！有效！我做了同样的事情，但我做错的是在 if 语句中我没有“返回”新的 Men 或 Women 小部件。