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

Question

我希望在选择 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,
      ),
    ),
  ),
);

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

根据评论更新

要根据选择更新正文，您应该使用 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"));
  }
}

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

Flutter: How do I navigate to a new screen using DropDownMenuItems

android

dart

flutter

flutter-layout