老孟导读:在Flutter中如何实现点击2次Back按钮退出App,如何实现App中多个Route(路由),如何实现Back按钮只退出指定页面,此篇文章将告诉你。 WillPopScope WillP
WillPopScope
- 需要询问用户是否退出。
- App中有多个Navigator,想要的是让其中一个 Navigator 退出,而不是直接让在 Widget tree 底层的 Navigator 退出。
WillPopScope(
onWillPop: () async => showDialog(
context: context,builder: (context) =>
AlertDialog(title: Text('你确定要退出吗?'),actions: <Widget>[
RaisedButton(
child: Text('退出'),onPressed: () => Navigator.of(context).pop(true)),RaisedButton(
child: Text('取消'),onPressed: () => Navigator.of(context).pop(false)),])),child: Container(
alignment: Alignment.center,child: Text('点击后退按钮,询问是否退出。'),))
DateTime _lastQuitTime;
WillPopScope(
onWillPop: () async {
if (_lastQuitTime == null ||
DateTime.now().difference(_lastQuitTime).inSeconds > 1) {
print('再按一次 Back 按钮退出');
Scaffold.of(context)
.showSnackBar(SnackBar(content: Text('再按一次 Back 按钮退出')));
_lastQuitTime = DateTime.now();
return false;
} else {
print('退出');
Navigator.of(context).pop(true);
return true;
}
},))
- 在页面底部有一个常驻bar,其上展示内容,这个常驻bar就需要一个自己的Navigator。
- 在使用TabView、BottomNavigationBar、CupertinoTabView这些组件时,希望有多个Tab,但每个Tab中有自己的导航行为,这时需要给每一个Tab加一个Navigator。
class MyHomePage extends StatefulWidget {
MyHomePage({Key key,this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
GlobalKey<NavigatorState> _key = GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
body: WillPopScope(
onWillPop: () async {
if (_key.currentState.canPop()) {
_key.currentState.pop();
return false;
}
return true;
},child: Column(
children: <Widget>[
Expanded(
child: Navigator(
key: _key,onGenerateRoute: (RouteSettings settings) =>
MaterialPageRoute(builder: (context) {
return OnePage();
}),),Container(
height: 50,color: Colors.blue,alignment: Alignment.center,child: Text('底部Bar'),)
],)),);
}
}
class OnePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: RaisedButton(
child: Text('去下一个页面'),onPressed: () {
Navigator.push(context,MaterialPageRoute(builder: (context) {
return TwoPage();
}));
},);
}
}
class TwoPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: Text('这是第二个页面'),);
}
}