Flutter中如何使用WillPopScope的示例代碼

更新時(shí)間：2020年05月13日 14:31:46 作者：老孟

這篇文章主要介紹了Flutter中如何使用WillPopScope,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

在Flutter中如何實(shí)現(xiàn)點(diǎn)擊2次Back按鈕退出App，如何實(shí)現(xiàn)App中多個(gè)Route（路由），如何實(shí)現(xiàn)Back按鈕只退出指定頁(yè)面，此篇文章將告訴你。

WillPopScope

WillPopScope用于處理是否離開(kāi)當(dāng)前頁(yè)面，在Flutter中有多種方式可以離開(kāi)當(dāng)前頁(yè)面，比如AppBar、CupertinoNavigationBar上面的返回按鈕，點(diǎn)擊將會(huì)回到前一個(gè)頁(yè)面，在Android手機(jī)上點(diǎn)擊實(shí)體（虛擬）返回按鈕，也將會(huì)回到前一個(gè)頁(yè)面，此功能對(duì)于iOS程序員來(lái)說(shuō)可能特別容易忽略。

以下幾種情況我們會(huì)用到WillPopScope：

需要詢問(wèn)用戶是否退出。
App中有多個(gè)Navigator，想要的是讓其中一個(gè) Navigator 退出，而不是直接讓在 Widget tree 底層的 Navigator 退出。

詢問(wèn)用戶是否退出

在Android App中最開(kāi)始的頁(yè)面點(diǎn)擊后退按鈕，默認(rèn)會(huì)關(guān)閉當(dāng)前activity并回到桌面，我們希望此時(shí)彈出對(duì)話框或者給出提示“再次點(diǎn)擊退出”，避免用戶的誤操作。

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('點(diǎn)擊后退按鈕，詢問(wèn)是否退出。'),
  ))

我們也可以把效果做成快速點(diǎn)擊2次退出：

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;
   }
  },
  child: Container(
   alignment: Alignment.center,
   child: Text('點(diǎn)擊后退按鈕，詢問(wèn)是否退出。'),
  ))

App中有多個(gè)Navigator

我們的App通常是在MaterialApp和CupertinoApp下，MaterialApp和CupertinoApp本身有一個(gè)Navigator，所以默認(rèn)情況下調(diào)用Navigator.pop或者Navigator.push就是在操作此Navigator。不過(guò)在一些情況下，我們希望有自己定義的Navigator，比如如下場(chǎng)景：

在頁(yè)面底部有一個(gè)常駐bar，其上展示內(nèi)容，這個(gè)常駐bar就需要一個(gè)自己的Navigator。
在使用TabView、BottomNavigationBar、CupertinoTabView這些組件時(shí)，希望有多個(gè)Tab，但每個(gè)Tab中有自己的導(dǎo)航行為，這時(shí)需要給每一個(gè)Tab加一個(gè)Navigator。

首頁(yè)：

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'),
       )
      ],
     )),
  );
 }
}

第一個(gè)頁(yè)面：

class OnePage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Scaffold(
   body: Center(
    child: Container(
     child: RaisedButton(
      child: Text('去下一個(gè)頁(yè)面'),
      onPressed: () {
       Navigator.push(context, MaterialPageRoute(builder: (context) {
        return TwoPage();
       }));
      },
     ),
    ),
   ),
  );
 }
}

第二個(gè)頁(yè)面：

class TwoPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Scaffold(
   body: Center(
    child: Container(
     child: Text('這是第二個(gè)頁(yè)面'),
    ),
   ),
  );
 }
}