Flutter Navigator 1.0下不使用Navigator.pop实现页面数据返回及AppBar返回按钮数据返回方法咨询

我之前用Navigator 1.0开发时也遇到过这个痛点：官方文档里的Navigator.pop(context, data)只覆盖了自定义按钮触发的场景，但用户点AppBar默认的返回箭头或者安卓物理返回键时，没法直接带数据回去。其实只要做两处调整就能解决，下面是具体方案：

1. 替换AppBar默认的返回按钮 #

默认的AppBar leading按钮是系统自带的，它只会触发不带参数的Navigator.pop。所以我们需要自定义一个leading按钮，在点击事件里手动调用带返回数据的pop方法：

class DetailPage extends StatelessWidget {
  // 要返回的数据，可以根据业务逻辑动态赋值
  final String resultData = "来自DetailPage的返回数据";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // 自定义leading，替换默认返回箭头
        leading: IconButton(
          icon: Icon(Icons.arrow_back), // 和默认返回箭头样式一致
          onPressed: () {
            // 带数据返回上一页
            Navigator.pop(context, resultData);
          },
        ),
        title: Text("详情页"),
      ),
      body: Center(child: Text("这是详情页面")),
    );
  }
}

2. 拦截物理返回键（适配Android） #

安卓用户习惯按物理返回键，这时候默认的返回行为也不会带数据，所以需要用WillPopScope组件包裹页面内容，拦截返回事件：

class DetailPage extends StatelessWidget {
  final String resultData = "来自DetailPage的返回数据";

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      // 拦截物理返回事件
      onWillPop: () async {
        // 手动触发带数据的返回
        Navigator.pop(context, resultData);
        // 返回false，阻止系统默认的返回行为
        return false;
      },
      child: Scaffold(
        appBar: AppBar(
          leading: IconButton((
            icon: Icon(Icons.arrow_back),
            onPressed: () {
              Navigator.pop(context, resultData);
            },
          ),
          title: Text("详情页"),
        ),
        body: Center(child: Text("这是详情页面")),
      ),
    );
  }
}

3. 在调用页面接收返回数据 #

调用DetailPage时，通过Navigator.push的then方法就能拿到返回的数据：

// 跳转至DetailPage的代码
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => DetailPage()),
).then((returnedData) {
  if (returnedData != null) {
    // 这里处理返回的数据，比如更新页面状态、打印日志等
    print("收到详情页返回的数据：$returnedData");
  }
});

这样不管用户是点击AppBar的返回箭头，还是按安卓物理返回键，都能把数据正常返回给上一页，完全适配Navigator 1.0的使用场景。

内容的提问来源于stack exchange，提问作者nbneo