点击项目后如何关闭脚手架的抽屉?
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();
嗯,这很简单
问题陈述:在默认主页中,当有人按下后退按钮时,(如果抽屉打开)它会关闭,否则会抛出提示要求退出应用程序“是”和“不”。
解决方案
添加
GlobalKey _scaffoldKey = new GlobalKey();
Make Function Future _onWillPop() async 处理所需的问题陈述
在下面的源代码中调用 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
在我点击脚手架抽屉中的某个项目后,我希望它自动隐藏自己。如何在 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();
嗯,这很简单
问题陈述:在默认主页中,当有人按下后退按钮时,(如果抽屉打开)它会关闭,否则会抛出提示要求退出应用程序“是”和“不”。
解决方案
添加
GlobalKey _scaffoldKey = new GlobalKey();
Make Function Future _onWillPop() async 处理所需的问题陈述
在下面的源代码中调用 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