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

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

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

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

#示例

為了防止用戶誤觸返回鍵退出，我們攔截返回事件。當用戶在1秒內點擊兩次返回按鈕時，則退出；如果間隔超過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秒內連續(xù)按兩次返回鍵退出"),
        )
    );
  }
}

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