Flutter 中的设备后退按钮覆盖

Posted 2023-02-23

【中文标题】Flutter 中的设备后退按钮覆盖

【英文标题】：device back button override in Flutter

【发布时间】：2020-10-10 19:13:26

【问题描述】：

我想覆盖设备后退按钮，我尝试了willowpopscope()，但这会在顶部应用程序上添加后退按钮，或者我们可以将其称为 Appbar。

但我不想使用顶部后退按钮，我想覆盖设备（移动系统）的后退按钮。例如，当按下设备后退按钮时，我想转到特定页面/活动。我怎样才能做到这一点？

注意：willowpopscope 只是在应用栏中添加返回按钮，不做任何与设备返回按钮相关的事情。

【参考方案1】：

使用几天前刚刚发布的back_button_interceptor。 它有助于覆盖设备后退按钮

语法使用 back_button_interceptor 是

@override
void initState() 
   super.initState();
   BackButtonInterceptor.add(myInterceptor);


@override
void dispose() 
   BackButtonInterceptor.remove(myInterceptor);
   super.dispose();


bool myInterceptor(bool stopDefaultButtonEvent) 
   print("BACK BUTTON!"); // Do some stuff.
   return true;

这是您可以覆盖实际设备后退按钮的方式

现在看例子

import 'package:back_button_interceptor/back_button_interceptor.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class MyWidget extends StatefulWidget 
  @override
  ListTab createState() => ListTab();

class ListTab extends State<MyWidget> 
  void initState() 
    super.initState();
    BackButtonInterceptor.add(myInterceptor);
  

  @override
  void dispose() 
    BackButtonInterceptor.remove(myInterceptor);
    super.dispose();
  

  bool myInterceptor(bool stopDefaultButtonEvent) 
    Navigator.push(context,
        MaterialPageRoute(builder: (context)=>App())
    );
    return true;
  
    @override
    Widget build(BuildContext context) 
        return new Scaffold(
          body: new Center(
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
            Container(
            child: new Text(
              "USER_PAGE",
            ),
          ),

      ])));
      

:D 完成了！！