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导航到新屏幕

1 个答案: