Flutter滑动弹出管理插件slideable_pop_scope的使用

slideable_pop_scope 是一个易于使用且适应 iOS 滑动手势返回功能的弹出管理插件。使用此插件可以解决在使用 Flutter 官方 PopScope 时，iOS 的滑动手势返回功能失效的问题。

使用说明

要使用此插件，首先需要在 pubspec.yaml 文件中添加依赖：

dependencies:
  slideable_pop_scope: ^x.y.z

然后运行 flutter pub get 来安装依赖。

示例代码

以下是一个完整的示例代码，展示了如何使用 SlideablePopScope 插件来管理页面之间的滑动返回手势。

导入库

在你的 Dart 文件中导入 slideable_pop_scope 库：

// main.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:slideable_pop_scope/slideable_pop_scope.dart';

使用 SlideablePopScope

在需要处理滑动返回的手势的页面中使用 SlideablePopScope，并实现 onWillPop 方法来处理返回逻辑：

// my_screen.dart
[@override](/user/override)
Widget build(BuildContext context) {
  return SlideablePopScope(
    child: _MyScreenContent(),
    onWillPop: _onWillPop,
  );
}

Future<bool> _onWillPop() async {
  // 显示确认对话框，询问用户是否确定返回
  bool shouldPop = await showDialog<bool>(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: const Text('确定要返回吗？'),
        actions: <Widget>[
          TextButton(
            onPressed: () => Navigator.of(context).pop(false),
            child: const Text('取消'),
          ),
          TextButton(
            onPressed: () => Navigator.of(context).pop(true),
            child: const Text('确定'),
          ),
        ],
      );
    },
  ) ?? false;

  return shouldPop;
}

完整示例

以下是一个完整的示例代码，展示了如何在一个应用中使用 SlideablePopScope：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:slideable_pop_scope/slideable_pop_scope.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  
  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'SlideablePopScope Example',
      home: PageA(),
    );
  }
}

class PageA extends StatelessWidget {
  const PageA({super.key});
  
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("PageA")),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(context, CupertinoPageRoute(
              builder: (context) {
                return const PageB();
              },
            ));
          },
          child: const Text("到 PageB"),
        ),
      ),
    );
  }
}

class PageB extends StatefulWidget {
  const PageB({super.key});
  
  [@override](/user/override)
  State<PageB> createState() => _PageBState();
}

class _PageBState extends State<PageB> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return SlideablePopScope(
      onWillPop: () async {
        return await _showPopConfirmDialog();
      },
      child: Scaffold(
        appBar: AppBar(title: const Text("PageB")),
        body: const Center(
          child: Text("PageB"),
        ),
      ),
    );
  }

  Future<bool> _showPopConfirmDialog() async {
    bool? res = await showDialog<bool>(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: const Text("返回 PageA?"),
          actions: [
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context, false);
              },
              child: const Text("取消"),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context, true);
              },
              child: const Text("确定"),
            ),
          ],
        );
      },
    );
    return res ?? false;
  }
}