Flutter手势滑动返回插件swipe_to_back的使用

Swipe to go back

一个简单的Flutter包，可以帮助你实现像Twitter一样通过向上或向下滑动手势来返回上一页。

Demo

开始使用

只需导航到由该包提供的垂直滑动手势页面，如以下示例所示：

onTap: () => Navigator.of(context).push(
        MaterialPageRoute(
            builder: (context) => const VerticalSwipeBackPage(
                ...[params]
        ),
    ),
),

参数说明：

  ///一个布尔标志，用于设置是否渲染右上角的信息按钮
  final bool showInfoIcon;

  ///信息按钮被点击时执行的回调函数
  final FutureOr<void> Function()? infoIconCallback;

  ///应用于页面框架的背景颜色
  final Color? backgroundColor;

  ///在页面被垂直拖动时不会移动的固定小部件
  final Widget? fixedWidget;

  ///底部操作的小部件列表
  final List<Widget>? bottomActions;

  ///需要拖动的页面主子小部件
  final Widget child;

完整示例

以下是一个完整的示例代码，展示了如何使用swipe_to_back插件。

import 'package:flutter/material.dart';
import 'package:swipe_to_back/swipe_to_back.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('首页'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Navigator.of(context).push(
            MaterialPageRoute(
              builder: (context) => const VerticalSwipeBackPage(
                showInfoIcon: true,
                infoIconCallback: () async {
                  // 点击信息按钮时执行的操作
                  print("Info Icon Clicked");
                },
                backgroundColor: Colors.lightBlue,
                fixedWidget: Container(
                  color: Colors.red,
                  height: 50,
                  width: double.infinity,
                  alignment: Alignment.center,
                  child: Text('固定小部件'),
                ),
                bottomActions: [
                  ElevatedButton(
                    onPressed: () {
                      print("Bottom Action 1 Clicked");
                    },
                    child: Text('底部动作1'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      print("Bottom Action 2 Clicked");
                    },
                    child: Text('底部动作2'),
                  ),
                ],
                child: Container(
                  color: Colors.green,
                  height: 300,
                  width: double.infinity,
                  alignment: Alignment.center,
                  child: Text('可拖动的小部件'),
                ),
              ),
            ),
          ),
          child: Text('进入滑动返回页面'),
        ),
      ),
    );
  }
}