Flutter可滑动移除页面插件dismissible_page的使用

简介

dismissible_page 是一个Flutter插件，它允许你通过滑动手势来关闭页面，从而提供更直观和动态的用户交互体验。你可以设置页面在任意方向上被滑动关闭，并且支持动画效果如边框、背景和缩放等。

主要特性

• 支持多方向滑动关闭
• 适用于嵌套列表视图
• 动画效果包括：边框、背景颜色及缩放
• 提供了丰富的自定义选项以满足不同需求

示例代码

以下是一个完整的示例demo，展示了如何使用 dismissible_page 插件创建一个可以滑动关闭的页面。

依赖配置

首先，在你的 pubspec.yaml 文件中添加 dismissible_page 依赖：

dependencies:
  flutter:
    sdk: flutter
  dismissible_page: ^latest_version # 替换为最新版本号

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

完整代码

main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dismissible Page Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SimpleExample(),
    );
  }
}

/// This is a basic usage of DismissiblePage
/// For more examples check the demo/folder
class SimpleExample extends StatelessWidget {
  static const imagePath = 'assets/images/home_1.png';

  const SimpleExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        title: Text('Simple Example'),
        titleTextStyle: TextStyle(
          fontSize: 16,
          fontWeight: FontWeight.w600,
          color: Colors.black.withOpacity(.85),
        ),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 20),
          child: GestureDetector(
            onTap: () {
              // Use extension method to use [TransparentRoute]
              // This will push page without route background
              Navigator.of(context).push(TransparentRoute(builder: (_) => SecondPage(imagePath: imagePath)));
            },
            child: Hero(
              tag: imagePath,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(12),
                child: Image.asset(imagePath, fit: BoxFit.cover),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  final String imagePath;

  const SecondPage({required this.imagePath});

  @override
  Widget build(BuildContext context) {
    return DismissiblePage(
      onDismissed: () => Navigator.of(context).pop(),
      // Start of the optional properties
      isFullScreen: false,
      disabled: false,
      minRadius: 10,
      maxRadius: 10,
      dragSensitivity: 1.0,
      maxTransformValue: .8,
      direction: DismissiblePageDismissDirection.multi,
      backgroundColor: Colors.black,
      onDragStart: () {
        print('onDragStart');
      },
      onDragUpdate: (details) {
        print(details);
      },
      dismissThresholds: {
        DismissiblePageDismissDirection.vertical: .2,
      },
      minScale: .8,
      startingOpacity: 1,
      reverseDuration: const Duration(milliseconds: 250),
      // End of the optional properties
      child: Scaffold(
        body: SingleChildScrollView(
          physics: ClampingScrollPhysics(),
          child: Column(
            children: [
              Hero(
                tag: imagePath,
                child: Image.asset(imagePath, fit: BoxFit.cover),
              ),
              ...List.generate(40, (index) => index + 1).map((index) {
                return ListTile(
                  title: Text(
                    'Item $index',
                    style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
                  ),
                );
              }),
            ],
          ),
        ),
      ),
    );
  }
}

关键点解释

1. 导入包：确保导入了 dismissible_page 包。
2. 创建主页面 (SimpleExample) 和可滑动关闭的页面 (SecondPage)。
3. GestureDetector：用于检测点击事件，触发新页面的显示。
4. Hero动画：实现两个页面之间平滑过渡的效果。
5. DismissiblePage构造器参数：
   • onDismissed: 当页面被完全滑出时调用此回调函数。
   • 其他可选参数（如 direction, isFullScreen 等）可以根据实际需要进行调整。

希望这个例子能帮助你更好地理解和使用 dismissible_page 插件！如果有任何问题或需要进一步的帮助，请随时提问。