Flutter中如何使用WillPopScope

老孟導讀：在Flutter中如何實現點擊2次Back按鈕退出App，如何實現App中多個Route（路由），如何實現Back按鈕只退出指定頁面，此篇文章將告訴你。

WillPopScope

WillPopScope用於處理是否離開當前頁面，在Flutter中有多種方式可以離開當前頁面，比如AppBar、CupertinoNavigationBar上面的返回按鈕，點擊將會回到前一個頁面，在Android手機上點擊實體（虛擬）返回按鈕，也將會回到前一個頁面，此功能對於iOS程序員來說可能特別容易忽略。

以下幾種情況我們會用到WillPopScope：

1. 需要詢問用戶是否退出。
2. App中有多個Navigator，想要的是讓其中一個 Navigator 退出，而不是直接讓在 Widget tree 底層的 Navigator 退出。

詢問用戶是否退出

在Android App中最開始的頁面點擊后退按鈕，默認會關閉當前activity並回到桌面，我們希望此時彈出對話框或者給出提示“再次點擊退出”，避免用戶的誤操作。

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

我們也可以把效果做成快速點擊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('點擊后退按鈕，詢問是否退出。'),
    ))

App中有多個Navigator

我們的App通常是在MaterialApp和CupertinoApp下，MaterialApp和CupertinoApp本身有一個Navigator，所以默認情況下調用Navigator.pop或者Navigator.push就是在操作此Navigator。不過在一些情況下，我們希望有自己定義的Navigator，比如如下場景：

• 在頁面底部有一個常駐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('這是第二個頁面'),
        ),
      ),
    );
  }
}

使用TabView、BottomNavigationBar、CupertinoTabView這些組件時也是一樣的原理，只需在每一個Tab中加入Navigator，不要忘記指定key。

交流

老孟Flutter博客地址（近200個控件用法）：http://laomengit.com

歡迎加入Flutter交流群（微信：laomengit）、關注公眾號【老孟Flutter】：