【Flutter】功能型組件之導航返回攔截

前言

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

接口描述

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

代碼示例

// 導航返回攔截（WillPopScope）

// 為了避免用戶誤觸返回按鈕而導致APP退出，在很多APP中都攔截了用戶點擊返回鍵的按鈕，然后進行一些防誤觸判斷，比如當用戶在某一個時間段內點擊兩次時，才會認為用戶是要退出（而非誤觸）。

// 例子：為了防止用戶誤觸返回鍵退出，我們攔截返回事件。當用戶在1秒內點擊兩次返回按鈕時，則退出；如果間隔超過1秒則不退出，並重新記時。
import 'package:flutter/material.dart';

class WillPopScopeTest extends StatefulWidget{
  WillPopScopeTestState createState() => WillPopScopeTestState();
}

class WillPopScopeTestState extends State<WillPopScopeTest>{
  // 上次點擊時間
  DateTime _lastPressedAt;

  Widget build(BuildContext context){
    return 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秒內連續按兩次返回鍵退出'),
      ),
    );
  }
}

總結

無。