点击项目后如何关闭脚手架的抽屉?

How to close Scaffold's drawer after an item tap?

在我点击脚手架抽屉中的某个项目后,我希望它自动隐藏自己。如何在 Flutter 中实现?

Navigator.pop() 将从堆栈中弹出 Drawer 路由并使其关闭。

Navigator.of(context).pop() 应该做你想做的:)

https://docs.flutter.io/flutter/widgets/Navigator-class.html https://docs.flutter.io/flutter/material/Drawer-class.html

对于最新的 Flutter 版本(我写这篇文章时是 v0.3.2),实现发生了一些变化,Navigator.pop() 现在需要给定的上下文。

Navigator.pop(context)是关闭路由的典型用法
Navigator.pop(context, true)是关闭路由返回结果的用法

请参阅 Flutter 的 Cookbook Drawer Class and example

Shorthand 用于关闭抽屉并导航到新路线:

Navigator.popAndPushNamed(context, '/newroute');

如果您只是想关闭 Drawer,您可以使用以下任一方法:

Navigator.pop(context);
Navigator.of(context).pop();

如果您想导航到新页面,可以使用

Navigator.popAndPushNamed(context, "/new_page");

Navigator.pop(context);
Navigator.push(context, MaterialPageRoute(builder: (_) => Page2()));

我认为 OP 可能想说的是,即使 Navigator.of(context).pop() 和 Navigator.pop(context) 应该起作用,但它们不适用于他的情况- 我遇到了同样的问题。

在项目的早期,抽屉正常工作 - 正确打开和关闭。由于进行了一些更改(none 直接对抽屉或其脚手架进行了更改)抽屉不再以 Navigator.of(context).pop() 和 Navigator.pop(context).

我做了更多的挖掘,发现你可以使用 Scaffold.of(context).openEndDrawer 来关闭抽屉,而不是使用 Navigator.pop - 尽管它看起来不应该.直到现在我才使用过这个功能,但它工作得很好。希望这对遇到同样问题的人有所帮助。

首先创建一个 ScaffoldState 键

GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

Scaffold(
  key: _scaffoldKey,)

现在您可以使用toggleDrawer()方法打开和关闭抽屉了。

左边抽屉

toggleDrawer() async {
  if (_scaffoldKey.currentState.isDrawerOpen) {
    _scaffoldKey.currentState.openEndDrawer();
  } else {
    _scaffoldKey.currentState.openDrawer();
  }
}

右边的抽屉

toggleDrawer() async {
  if (_scaffoldKey.currentState.isDrawerOpen) {
    _scaffoldKey.currentState.openDrawer();
  } else {
    _scaffoldKey.currentState.openEndDrawer();
  }
}

这就是答案

第一个 Class

GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

第二个小部件

 Scaffold(key: _scaffoldKey,)

第三个代码

if (_scaffoldKey.currentState.isDrawerOpen) {
  _scaffoldKey.currentState.openEndDrawer();
}

Navigate.of(上下文).pop();
Navigate.pop(contex);

必须是 onTap() 函数中的第一个

例如:

 onTap: () {
 Navigator.of(context).pop();//before pushing to any other route 
 Navigator.push(
 context,
 MaterialPageRoute(
 builder: (BuildContext context) => Screen2(),
   ),
  );
 }

您可以根据需要使用下面的代码。

当您想要删除并推送新路由时:

Navigator.of(context).popAndPushNamed('/routeName');

当你想弹出时:

Navigator.of(context).pop();

嗯,这很简单

问题陈述:在默认主页中,当有人按下后退按钮时,(如果抽屉打开)它会关闭,否则会抛出提示要求退出应用程序“是”和“不”。

解决方案

  1. 添加

    GlobalKey _scaffoldKey = new GlobalKey();

  2. Make Function Future _onWillPop() async 处理所需的问题陈述

  3. 在下面的源代码中调用 key 和 onWillPop

See Through full source code 对于在源代码中完成的与此问题陈述相关的添加

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  Future<bool> _onWillPop() async {
    if(_scaffoldKey.currentState != null && _scaffoldKey.currentState!.isDrawerOpen){
      return true;
    }
    return (await showDialog(
          context: context,
          builder: (context) => new AlertDialog(
            title: new Text('Leaving our App?'),
            content: new Text('Are you sure you want to Exit?'),
            actions: <Widget>[
              TextButton(
                onPressed: () => Navigator.of(context).pop(false),
                child: new Text('No'),
              ),
              TextButton(
                onPressed: () => Navigator.of(context).pop(true),
                child: new Text('Yes'),
              ),
            ],
          ),
        )) ??
        false;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      body: WillPopScope(
        onWillPop: _onWillPop,
        child: Container(
          child: Center(
            child: Text("Welcome My App"),
          ),
        ),
      ),
      drawer: SideDrawer(),
    );
  }
}
 ListTile(
              title: Text(
                'Notification Setting',
                style: TextStyle(
                    fontSize: 16.0, color: HexColor(HexColor.gray_text)),
              ),
              leading: Icon(
                Icons.notifications_outlined,
                size: 24.0,
                color: HexColor(HexColor.primarycolor),
              ),
              onTap: () {

                _scaffoldKey.currentState?.openEndDrawer();
                Navigator.push(context, MaterialPageRoute(builder: (context) {
                  return NotificationSettingActivity();
                }
                ));
              },
            ),

先Pop widget,之后Push你的路由下次回来会自动关闭Drawer

Navigator.pop(context); // Widget will be poped
Navigator.pushNamed(context, '/routename'); // New Route will be pushed