Flutter實戰(zhàn) 導(dǎo)航返回攔截(WillPopScope)

為了避免用戶誤觸返回按鈕而導(dǎo)致 APP 退出，在很多 APP 中都攔截了用戶點擊返回鍵的按鈕，然后進行一些防誤觸判斷，比如當(dāng)用戶在某一個時間段內(nèi)點擊兩次時，才會認(rèn)為用戶是要退出（而非誤觸）。Flutter 中可以通過WillPopScope來實現(xiàn)返回按鈕攔截，我們看看WillPopScope的默認(rèn)構(gòu)造函數(shù)：

const WillPopScope({
  ...
  @required WillPopCallback onWillPop,
  @required Widget child
})

onWillPop是一個回調(diào)函數(shù)，當(dāng)用戶點擊返回按鈕時被調(diào)用（包括導(dǎo)航返回按鈕及 Android 物理返回按鈕）。該回調(diào)需要返回一個Future對象，如果返回的Future最終值為false時，則當(dāng)前路由不出棧(不會返回)；最終值為true時，當(dāng)前路由出棧退出。我們需要提供這個回調(diào)來決定是否退出。

#示例

為了防止用戶誤觸返回鍵退出，我們攔截返回事件。當(dāng)用戶在1秒內(nèi)點擊兩次返回按鈕時，則退出；如果間隔超過1秒則不退出，并重新記時。代碼如下：

import 'package:flutter/material.dart';
class WillPopScopeTestRoute extends StatefulWidget {
  @override
  WillPopScopeTestRouteState createState() {
    return new WillPopScopeTestRouteState();
  }
}
class WillPopScopeTestRouteState extends State<WillPopScopeTestRoute> {
  DateTime _lastPressedAt; //上次點擊時間
  @override
  Widget build(BuildContext context) {
    return new WillPopScope(
        onWillPop: () async {
          if (_lastPressedAt == null ||
              DateTime.now().difference(_lastPressedAt) > Duration(seconds: 1)) {
            //兩次點擊間隔超過1秒則重新計時
            _lastPressedAt = DateTime.now();
            return false;
          }
          return true;
        },
        child: Container(
          alignment: Alignment.center,
          child: Text("1秒內(nèi)連續(xù)按兩次返回鍵退出"),
        )
    );
  }
}

讀者可以運行示例看看效果。