flutter - 如何在 Flutter 中的任何图标上显示弹出菜单？

Question

我想要一个弹出菜单或某种带有选项的幻灯片屏幕，当我单击应用栏中的图标时，我不想使用 PopMenuButton，因为我不想使用该图标。我怎样才能做到这一点？

我的代码

  return new Scaffold(
      appBar: new AppBar(
        title: new Text("Home"),
        leading:   IconButton(
          icon: Icon(
            Icons.dehaze,
            color: Colors.black,
          ),
          onPressed: () {
            // do something
          },
        ),
      ),
      body: new Center(...),
    );

Answer 1

@Denise，您无需手动创建按钮并为抽屉菜单分配操作。您可以简单地使用 drawer在 Scaffold与 Drawer像这样的小部件，

class MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: Text('Test'),
            ),
            drawer: Drawer(
              // Add a ListView to the drawer. This ensures the user can scroll
              // through the options in the drawer if there isn't enough vertical
              // space to fit everything.
              child: ListView(
                // Important: Remove any padding from the ListView.
                padding: EdgeInsets.zero,
                children: <Widget>[
                  DrawerHeader(
                    child: Text('Drawer Header'),
                    decoration: BoxDecoration(
                      color: Colors.blue,
                    ),
                  ),
                  ListTile(
                    title: Text('Item 1'),
                    onTap: () {
                      // Update the state of the app
                      // ...
                      // Then close the drawer
                      Navigator.pop(context);
                    },
                  ),
                  ListTile(
                    title: Text('Item 2'),
                    onTap: () {
                      // Update the state of the app
                      // ...
                      // Then close the drawer
                      Navigator.pop(context);
                    },
                  ),
                ],
              ),
            ),
            body: Padding(
                  padding: EdgeInsets.all(20.0),
                  child: Center(
                    child: Column(
                      children: <Widget>[
                        Text('')
                      ],
                    )
                  )
                  ),
        )
    );
  }
}

如果你想使用不同的图标，

class MyAppState extends State<MyApp> {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          key: _scaffoldKey,
            appBar: AppBar(
              title: Text('Test'),
                leading: new IconButton(
                    icon: new Icon(Icons.dehaze),
                    onPressed: () => _scaffoldKey.currentState.openDrawer()),
            ),
            drawer: Drawer(......

希望这可以帮助。