如何在 flutter 中拦截 AppBar 中的后退按钮

Question

我正在使用拦截器 https://pub.dartlang.org/packages/back_button_interceptor 在第 1 页从第 2 页返回时执行一个方法。

如果我使用设备后退按钮从第 2 页返回到第 1 页，则会执行该方法。

但是如果我使用 appBar 上的箭头按钮从第 2 页返回到第 1 页，我将无法执行该方法。

后退箭头按钮功能如何默认为设备后退按钮？

Answer 1

您可以使用 WillPopScope 围绕页面 2 上的脚手架，将 onWillPop 设置为 false 以防止页面被系统弹出，然后将您自己的后退按钮添加到应用栏的前导小部件中并在其中执行弹出操作。

@override
Widget build(BuildContext context) {
  return new WillPopScope(
    onWillPop: () async => false,
    child: new Scaffold(
      appBar: new AppBar(
        title: new Text("data"),
        leading: new IconButton(
          icon: new Icon(Icons.ac_unit),
          onPressed: () => Navigator.of(context).pop(),
        ),
      ),
    ),
  );
}

来自

的答案代码

编辑：添加到第 2 页以控制导航

除上述代码外，您还要将以下代码添加到第 2 页。更改

Navigator.of(context).pop()

到

Navigator.of(context).pop('upload_files')

然后在您导航的第 1 页中，您将等待导航并使用从第 2 页上的弹出窗口返回的结果和运行您的逻辑

var navigationResult = await Navigator.push(
        context,
        new MaterialPageRoute(
            builder: (context) => Page2()));


 if(navigationResult == 'upload_files') {
    uploadFiles(); // Perform your custom functionality here.
 }

Answer 2

AppBar 中的默认后退按钮是 material.dart 中的 BackButton 小部件。您可以手动创建它并传递您自己的 onPressed 来执行您想要的操作：

return Scaffold(
  appBar: AppBar(
    leading: BackButton(onPressed: _onBackPressed),
    title: Text('Title'),
  ),
  body: Container(),
);

如果您未在 AppBar 中指定 leading，则它会创建一个 BackButton 以及执行 Navigator.maybePop(context).

的处理程序

如何在 flutter 中拦截 AppBar 中的后退按钮

How to intercept back button in AppBar in flutter

back-button

flutter