Flutter中侧滑返回手势时如何传递数据？

针对侧滑返回时需要传递数据的场景，你可以通过以下两种方式解决：

方法一：拦截PopScope默认行为，手动携带数据返回 #

默认侧滑返回会触发Navigator.pop(context)且不带参数，我们可以通过PopScope的canPop和onPopInvoked配合，拦截默认行为并手动传递数据：

class SecondPage extends StatelessWidget {
  const SecondPage({super.key});

  @override
  Widget build(BuildContext context) {
    // 准备要传递的数据
    final returnData = "从第二页返回的内容";

    return PopScope(
      // 禁用系统默认的pop逻辑
      canPop: false,
      onPopInvoked: (bool didPop) {
        if (!didPop) {
          // 手动执行pop并携带数据
          Navigator.pop(context, returnData);
        }
      },
      child: Scaffold(
        appBar: AppBar(title: const Text("第二页")),
        body: const Center(child: Text("侧滑返回试试")),
      ),
    );
  }
}

在跳转页面接收返回数据：

// 跳转至第二页的代码
Navigator.push(context, MaterialPageRoute(builder: (_) => const SecondPage()))
    .then((value) {
  if (value != null) {
    // 处理返回的数据
    print("收到返回内容: $value");
  }
});

方法二：通过共享状态实时同步数据 #

如果需要在侧滑过程中（而非仅页面弹出后）传递数据，可以用状态管理或回调实时更新：

1. 定义简单的状态类：

class PageData extends ChangeNotifier {
  String _content = "";

  String get content => _content;

  void updateContent(String newContent) {
    _content = newContent;
    notifyListeners();
  }
}

2. 父页面提供状态，子页面侧滑时更新状态：

// 父页面
class FirstPage extends StatelessWidget {
  const FirstPage({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => PageData(),
      child: Scaffold(
        appBar: AppBar(title: const Text("第一页")),
        body: Center(
          child: Consumer<PageData>(
            builder: (context, data, child) {
              return Text("实时接收数据: ${data.content}");
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (_) => const SecondPage())),
          child: const Icon(Icons.navigate_next),
        ),
      ),
    );
  }
}

// 子页面
class SecondPage extends StatelessWidget {
  const SecondPage({super.key});

  @override
  Widget build(BuildContext context) {
    final pageData = Provider.of<PageData>(context, listen: false);
    
    return GestureDetector(
      // 监听侧滑手势，实时更新数据
      onHorizontalDragUpdate: (details) {
        if (details.delta.dx > 15) {
          pageData.updateContent("侧滑过程中传递的数据");
        }
      },
      child: PopScope(
        child: Scaffold(
          appBar: AppBar(title: const Text("第二页")),
          body: const Center(child: Text("侧滑返回试试")),
        ),
      ),
    );
  }
}

这种方式下，父页面能在用户侧滑过程中实时获取子页面传递的数据。

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