Flutter微信风格拖拽消失插件fake_wx_drag_dismiss的使用

Flutter微信风格拖拽消失插件fake_wx_drag_dismiss的使用

特性

仿照微信朋友圈查看视频互动。

使用方法

主页面

在主页面中，通过 GestureDetector 触发一个全屏对话框，展示一个拖拽消失的页面。

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      title: Text('Fake demo'),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          GestureDetector(
            onTap: () {
              Navigator.push(
                context,
                PageRouteBuilder(
                  fullscreenDialog: true,
                  opaque: false,
                  pageBuilder: (ctx, begin, end) {
                    return DragTransitionPage(builder: (ctx) {
                      return const HeroWxPage(
                        tag: 'HeroWxPage',
                      );
                    });
                  },
                  transitionsBuilder: (ctx, _, __, child) {
                    return defaultTransitionsBuilder(context, child);
                  },
                  transitionDuration: dragDefaultTransitionDuration,
                  reverseTransitionDuration: dragDefaultTransitionDuration,
                ),
              );
            },
            child: Hero(
              tag: 'HeroWxPage',
              child: Container(
                height: 100,
                width: 100,
                clipBehavior: Clip.antiAlias,
                decoration: const BoxDecoration(
                  color: Colors.transparent,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(16),
                    topRight: Radius.circular(16),
                  ),
                ),
                child: Image.network(
                  'https://source.unsplash.com/1900x3600/?camera,paper',
                  width: 100,
                  height: 100,
                  fit: BoxFit.fill,
                ),
              ),
            ),
          ),
          // const JankWidget(),
        ],
      ),
    ), // 这个逗号使得自动格式化对构建方法更友好。
  );
}

拖拽消失页面

拖拽消失页面通过 DragTransitionPage 构建，并且使用了 HeroAnimationWidget 来实现英雄动画效果。

class HeroWxPage extends StatelessWidget {
  const HeroWxPage({
    super.key,
    required this.tag,
  });
  final String tag;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return HeroAnimationWidget(
      tag: tag,
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: Image.network(
          'https://source.unsplash.com/1900x3600/?camera,paper',
          fit: BoxFit.fill,
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
        ),
      ),
    );
  }
}

更多关于Flutter微信风格拖拽消失插件fake_wx_drag_dismiss的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter微信风格拖拽消失插件fake_wx_drag_dismiss的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


fake_wx_drag_dismiss 是一个模仿微信风格的 Flutter 插件，用于实现拖拽消失的效果。这个插件通常用于在用户通过拖拽操作来关闭某个页面或组件时，提供类似于微信的交互体验。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  fake_wx_drag_dismiss: ^latest_version

然后运行 flutter pub get 来安装插件。

使用插件

fake_wx_drag_dismiss 插件提供了一个 WxDragDismiss 组件，你可以将它包裹在你想要实现拖拽消失效果的组件或页面上。

基本用法

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fake WX Drag Dismiss Example'),
      ),
      body: WxDragDismiss(
        child: Center(
          child: Text('Drag me down to dismiss'),
        ),
        onDismissed: () {
          Navigator.pop(context);
        },
      ),
    );
  }
}

参数说明

  • child: 你想要实现拖拽消失效果的组件。
  • onDismissed: 当拖拽消失操作完成时触发的回调函数。通常在这里执行页面关闭的逻辑，比如 Navigator.pop(context)。
  • dragThreshold: 拖拽的阈值，表示用户需要拖拽多少距离才能触发消失效果。默认值为 100。
  • backgroundColor: 背景颜色，默认值为 Colors.black.withOpacity(0.8)。

自定义样式

你可以通过 backgroundColor 参数来自定义背景颜色，或者通过 dragThreshold 来调整拖拽的敏感度。

WxDragDismiss(
  child: Center(
    child: Text('Drag me down to dismiss'),
  ),
  onDismissed: () {
    Navigator.pop(context);
  },
  dragThreshold: 150, // 调整拖拽阈值
  backgroundColor: Colors.blue.withOpacity(0.5), // 自定义背景颜色
)
回到顶部