flutter开发实战-手势Gesture与ListView滚动竞技场的可滑动关闭组件

flutter开发实战-手势Gesture与ListView滚动竞技场的可滑动关闭组件

最近看到了一个插件，实现一个可滑动关闭组件。滑动关闭组件即手指向下滑动，组件随手指移动，当移动一定位置时候，手指抬起后组件滑出屏幕。

一、GestureDetector嵌套Container非ListView

如果要可滑动关闭，则需要手势GestureDetector，GestureDetector这里实现了onVerticalDragDown、onVerticalDragUpdate、onVerticalDragEnd，通过手势，更新AnimatedContainer的高度。

@overrideWidget build(BuildContext context) {Size screenSize = MediaQuery.of(context).size;return Column(mainAxisSize: MainAxisSize.min,children: <Widget>[GestureDetector(onVerticalDragDown: _onVerticalDragDown,onVerticalDragUpdate: _onVerticalDragUpdate,onVerticalDragEnd: _onVerticalDragEnd,child: AnimatedContainer(curve: Curves.easeOut,duration: Duration(milliseconds: 250),onEnd: () {_onAniPositionedEnd(context);},height: yBottomOffset + widget.displayHeight,width: screenSize.width,clipBehavior: Clip.hardEdge,decoration: const BoxDecoration(color: Colors.transparent,),child: widget.child,),),],);}

我们通过onVerticalDragUpdate来更新AnimatedContainer的高度height，

void _onVerticalDragUpdate(DragUpdateDetails details) {print("_onVerticalDragUpdate");if (details.delta.dy <= 0) {// 向上isDragDirectionUp = true;} else {// 向下isDragDirectionUp = false;}yBottomOffset -= details.delta.dy;if (yBottomOffset > 0.0) {yBottomOffset = 0.0;}if (yBottomOffset < -widget.displayHeight) {yBottomOffset = -widget.displayHeight;}setState(() {});}

当拖动手势结束之后，来检测是否是隐藏状态。

void _onVerticalDragEnd(DragEndDetails details) {print("_onVerticalDragEnd");if (yBottomOffset < -widget.displayHeight / 3) {// 隐藏移除yBottomOffset = -widget.displayHeight;isCompleteHide = true;} else {yBottomOffset = 0.0;isCompleteHide = false;}setState(() {});}

AnimatedContainer中有onEnd方法回调，当动画结束之后，在此方法回调中来处理是否pop等操作

void _onAniPositionedEnd(BuildContext context) {print("_onAniPositionedEnd");if (isCompleteHide) {// 隐藏了，则移除Navigator.of(context).pop();}}

DragBottomSheet2完整代码如下

import 'package:flutter/material.dart';class DragBottomSheet2 extends StatefulWidget {const DragBottomSheet2({super.key,required this.child,required this.displayHeight,});// childfinal Widget child;// 展示的child高度final double displayHeight;@overrideState<DragBottomSheet2> createState() => _DragBottomSheet2State();
}class _DragBottomSheet2State extends State<DragBottomSheet2> {bool? isDragDirectionUp;double yBottomOffset = 0.0;bool isCompleteHide = false;void _onVerticalDragDown(DragDownDetails details) {print("_onVerticalDragDown");}void _onVerticalDragUpdate(DragUpdateDetails details) {print("_onVerticalDragUpdate");if (details.delta.dy <= 0) {// 向上isDragDirectionUp = true;} else {// 向下isDragDirectionUp = false;}yBottomOffset -= details.delta.dy;if (yBottomOffset > 0.0) {yBottomOffset = 0.0;}if (yBottomOffset < -widget.displayHeight) {yBottomOffset = -widget.displayHeight;}setState(() {});}void _onVerticalDragEnd(DragEndDetails details) {print("_onVerticalDragEnd");if (yBottomOffset < -widget.displayHeight / 3) {// 隐藏移除yBottomOffset = -widget.displayHeight;isCompleteHide = true;} else {yBottomOffset = 0.0;isCompleteHide = false;}setState(() {});}void _onAniPositionedEnd(BuildContext context) {print("_onAniPositionedEnd");if (isCompleteHide) {// 隐藏了，则移除Navigator.of(context).pop();}}@overrideWidget build(BuildContext context) {Size screenSize = MediaQuery.of(context).size;return Column(mainAxisSize: MainAxisSize.min,children: <Widget>[GestureDetector(onVerticalDragDown: _onVerticalDragDown,onVerticalDragUpdate: _onVerticalDragUpdate,onVerticalDragEnd: _onVerticalDragEnd,child: AnimatedContainer(curve: Curves.easeOut,duration: Duration(milliseconds: 250),onEnd: () {_onAniPositionedEnd(context);},height: yBottomOffset + widget.displayHeight,width: screenSize.width,clipBehavior: Clip.hardEdge,decoration: const BoxDecoration(color: Colors.transparent,),child: widget.child,),),],);}
}

点击按钮弹出bottomSheet2代码如下

void showBottomSheet2(BuildContext context) {Size size = MediaQuery.of(context).size;double displayHeight = size.height - 88;showModalBottomSheet(context: context,isScrollControlled: true,builder: (ctx) {return DragBottomSheet2(displayHeight: displayHeight,child: Container(width: size.width,height: displayHeight,color: Colors.orangeAccent,child: Text('内容',style: TextStyle(color: Colors.black,),),),);},);}

效果图如下

在这里插入图片描述

二、GestureDetector嵌套ListView

GestureDetector嵌套ListView后，Flutter会根据竞技场Arena机制，通过一定逻辑选择一个组件胜出。
Flutter为了解决手势冲突问题，Flutter给开发者提供了一套解决方案。在该方案中，Flutter引入了Arena（竞技场）概念，然后把冲突的手势加入到Arena中并竞争，谁胜利，谁就获得手势的后续处理权。

Arena竞技场的原理请看https://juejin.cn/post/6874570159768633357

所以在GestureDetector嵌套ListView后，Flutter框架会将这些Gesture与ListView组件都加入竞技场，然后通过一定的逻辑选择一个组件胜出，通常同类组件嵌套时最内层的组件胜出，胜出的组件会处理接下来的move和up事件，其它组件则不会继续处理这些事件了。所以在GestureDetector嵌套ListView的场景中，由于是ListView最终胜出，所以后续的事件都交由ListView处理，而GestureDetector收不到后续的事件，也就不会响应用户的手势了。因此，我们解决这个问题的第一步就是要让GestureDetector在这种场景下也能收到后续的事件

参考请看https://zhuanlan.zhihu.com/p/680586251

我们需要根据GestureDetector真正处理用户手势事件的是内部的Recognizer，比如处理上下滑动的是VerticalDragGestureRecognizer而Recognizer在竞技场失败后也可以单方面宣布自己胜出这样即使在竞技场失败了，GestureDetector也能收到后续的手势事件
因此我们现定义一个单方面宣布胜出的Recognizer

class _MyVerticalDragGestureRecognizer extends VerticalDragGestureRecognizer {@overridevoid rejectGesture(int pointer) {// 单方面宣布自己胜出acceptGesture(pointer);}
}

我们需要将Recognizer加入到GestureDetector中，会用到RawGestureDetector

RawGestureDetector(gestures: {_MyVerticalDragGestureRecognizer: GestureRecognizerFactoryWithHandlers<_MyVerticalDragGestureRecognizer>(() => _MyVerticalDragGestureRecognizer(),(_MyVerticalDragGestureRecognizer recognizer) {recognizer..onStart = (DragStartDetails details) {}..onUpdate = (DragUpdateDetails details) {}..onEnd = (DragEndDetails details) {};}),},child: ...);

这时候当滚动ListView时候，也能收到手势事件了。

监听ListView的滚动，时候我们需要用到NotificationListener

 NotificationListener(  // 监听内部ListView的滑动变化onNotification: (ScrollNotification notification) {if (notification is OverscrollNotification && notification.overscroll < 0) {// 用户向下滑动，ListView已经滑动到顶部，处理GestureDetector的滑动事件} else if (notification is ScrollUpdateNotification) {// 用户在ListView中执行滑动动作，关闭外部GestureDetector的滑动处理} else {}return false;},child:  //ListView),

最后DragGestureBottomSheet完整代码如下

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app_demolab/drag_sheet_controller.dart';class DragGestureBottomSheet extends StatefulWidget {const DragGestureBottomSheet({super.key,required this.child,required this.displayHeight,this.duration = const Duration(milliseconds: 200),this.openDraggable = true,this.autoNavigatorPop = true,this.onShow,this.onHide,});// childfinal Widget child;// 展示的child高度final double displayHeight;// 拖动动画时长durationfinal Duration duration;// 是否需要拖动final bool openDraggable;// 是否需要自动popfinal bool autoNavigatorPop;// This method will be executed when the solid bottom sheet is completely// opened.final void Function()? onShow;// This method will be executed when the solid bottom sheet is completely// closed.final void Function()? onHide;@overrideState<DragGestureBottomSheet> createState() => _DragGestureBottomSheetState();
}class _DragGestureBottomSheetState extends State<DragGestureBottomSheet> {bool? isDragDirectionUp;double yBottomOffset = 0.0;bool isDraggable = false;bool isCompleteHide = false;DragSheetController? dragSheetController;@overridevoid initState() {// TODO: implement initStatedragSheetController = DragSheetController();dragSheetController?.dispatch(widget.displayHeight);super.initState();}@overridevoid dispose() {// TODO: implement disposedragSheetController?.dispose();super.dispose();}void _onVerticalDragUpdate(data) {if (widget.openDraggable) {print("data.delta.dy:${data.delta.dy}");if (data.delta.dy <= 0) {// 向上isDragDirectionUp = true;} else {// 向下isDragDirectionUp = false;}yBottomOffset -= data.delta.dy;if (yBottomOffset > 0.0) {yBottomOffset = 0.0;}if (yBottomOffset < -widget.displayHeight) {yBottomOffset = -widget.displayHeight;}double height = widget.displayHeight + yBottomOffset;dragSheetController?.dispatch(height);}}void _onVerticalDragEnd(data) {if (widget.openDraggable) {// 根据判断是否隐藏与显示if (false == isDragDirectionUp) {if (yBottomOffset < -widget.displayHeight / 3) {// 隐藏移除yBottomOffset = -widget.displayHeight;isCompleteHide = true;} else {yBottomOffset = 0.0;isCompleteHide = false;}} else {yBottomOffset = 0.0;isCompleteHide = false;}double height = widget.displayHeight + yBottomOffset;dragSheetController?.dispatch(height);}}void _onAniPositionedEnd(BuildContext context) {// 动画结束print("_onAniPositionedEnd");if (isCompleteHide) {// 隐藏，则调用hidenif (widget.onHide != null) {widget.onHide!.call();}} else {// 显示，则调用showif (widget.onShow != null) {widget.onShow!.call();}}if (isCompleteHide && widget.autoNavigatorPop) {// 隐藏了，则移除Navigator.of(context).pop();}}@overrideWidget build(BuildContext context) {Size screenSize = MediaQuery.of(context).size;return Column(mainAxisSize: MainAxisSize.min,children: <Widget>[RawGestureDetector(gestures: {_MyVerticalDragGestureRecognizer:GestureRecognizerFactoryWithHandlers<_MyVerticalDragGestureRecognizer>(() => _MyVerticalDragGestureRecognizer(),(_MyVerticalDragGestureRecognizer recognizer) {recognizer..onStart = (DragStartDetails details) {}..onUpdate = (DragUpdateDetails details) {if (!isDraggable) {return;}_onVerticalDragUpdate(details);}..onEnd = (DragEndDetails details) {_onVerticalDragEnd(details);};}),},child: StreamBuilder(stream: dragSheetController?.streamData,initialData: widget.displayHeight,builder: (_, snapshot) {return AnimatedContainer(curve: Curves.easeOut,duration: widget.duration,onEnd: () {_onAniPositionedEnd(context);},height: snapshot.data,width: screenSize.width,clipBehavior: Clip.hardEdge,decoration: const BoxDecoration(color: Colors.transparent,),child: NotificationListener(// 监听内部ListView的滑动变化onNotification: (ScrollNotification notification) {if (notification is OverscrollNotification &&notification.overscroll < 0) {// 用户向下滑动，ListView已经滑动到顶部，处理GestureDetector的滑动事件isDraggable = true;} else if (notification is ScrollUpdateNotification) {// 用户在ListView中执行滑动动作，关闭外部GestureDetector的滑动处理isDraggable = false;} else {}return false;},child: widget.child,),);},),)],);}
}class _MyVerticalDragGestureRecognizer extends VerticalDragGestureRecognizer {@overridevoid rejectGesture(int pointer) {// 单方面宣布自己胜出acceptGesture(pointer);}
}

三、DragSheetController处理数据流

这里定义了DragSheetController来处理数据流，DragSheetController中包括streamController、subscription、streamSink、streamData

StreamBuilder是一个Widget，它依赖Stream来做异步数据获取刷新widget。
Stream是一种用于异步处理数据流的机制，它允许我们从一端发射一个事件，从另外一端去监听事件的变化.Stream类似于JavaScript中的Promise、Swift中的Future或Java中的RxJava，它们都是用来处理异步事件和数据的。Stream是一个抽象接口，我们可以通过StreamController接口可以方便使用Stream。

使用详情请查看https://brucegwo.blog.csdn.net/article/details/136232000

最后DragSheetController代码如下

import 'dart:async';/// 处理Stream、StreamController相关逻辑
class DragSheetController  {StreamSubscription<double>? subscription;//创建StreamControllerStreamController<double>? streamController = StreamController<double>.broadcast();// 获取StreamSink用于发射事件StreamSink<double>? get streamSink => streamController?.sink;// 获取Stream用于监听Stream<double>? get streamData => streamController?.stream;// Adds new values to streamsvoid dispatch(double value) {streamSink?.add(value);}// Closes streamsvoid dispose() {streamSink?.close();}
}

通过DragSheetController，当拖动时候高度发生变化时候会调用dispatch方法，dispatch来发射数据流，DragGestureBottomSheet中通过StreamBuilder来调整AnimatedContainer的高度。

最后调用使用DragGestureBottomSheet

我们使用showModalBottomSheet展示DragGestureBottomSheet时候

// 显示底部弹窗void showCustomBottomSheet(BuildContext context) {Size size = MediaQuery.of(context).size;double displayHeight = size.height - 88;showModalBottomSheet(context: context,isScrollControlled: true,builder: (ctx) {return DragGestureBottomSheet(displayHeight: displayHeight,autoNavigatorPop: true,openDraggable: true,onHide: () {print("onHide");},onShow: () {print("onShow");},child: Container(width: size.width,height: displayHeight,color: Colors.white,child: ScrollConfiguration(behavior: NoIndicatorScrollBehavior(),child: ListView.builder(itemCount: 20,physics: ClampingScrollPhysics(),itemBuilder: (context, index) {return GestureDetector(child: Container(width: size.width,height: 100,decoration: BoxDecoration(color: Colors.transparent,border: Border.all(color: Colors.black12,width: 0.25,style: BorderStyle.solid,),),child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text('index -- $index'),SizedBox(width: 50,child: ClipOval(child:Image.asset("assets/images/hero_test.png")),),],),),onTap: () {Navigator.of(context).push(CupertinoPageRoute(builder: (BuildContext context) {return HeroPage();}));},);},),),),);},);}

效果图如下

在这里插入图片描述

https://brucegwo.blog.csdn.net/article/details/136241765

四、小结

flutter开发实战-手势Gesture与ListView滚动竞技场的可滑动关闭组件

学习记录，每天不停进步。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/697259.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

大保司保费贵，是否物有所值？

大保司保费贵，是否物有所值？

《大保司保费贵&#xff0c;是否物有所值》 这是罗师兄的原创文章 预计8-9分钟读完 作者&#xff1a;罗师兄 微信号&#xff1a;luoyun515 当我们想要买一份重疾险、储蓄险等长期险时&#xff0c; 我们会发现&#xff0c;同样的保障责任和保额&#xff0c; 不同保险公司的…
阅读更多...
基于AdaBoost算法的情感分析研究-微博情感分析-文本分类

基于AdaBoost算法的情感分析研究-微博情感分析-文本分类

基于AdaBoost算法的情感分析研究 摘 要 随着互联网的快速发展&#xff0c;各类社交媒体平台如微信、QQ等也与日俱增&#xff0c;而微博更是集成了传统网站、论坛、博客等的优点&#xff0c;并加上了人与人之间的互动性、关系亲密程度等多种智能算法&#xff0c;并以简练的形式…
阅读更多...
python安装与配置2024最新版

python安装与配置2024最新版

对python不熟悉的可以去看看这篇文章python介绍 pytho安装 来到Python官网&#xff1a;https://www.python.org/ 然后 选着download列表下的windows , 然后加进入python各个版本的下载界面 可以看到截止2024年2月22日,最新版是3.12.2 但是我们一般下载稳定版 如下,点击连接进…
阅读更多...
设计模式学习笔记 - 面向对象 - 5.接口和抽象类的区别

设计模式学习笔记 - 面向对象 - 5.接口和抽象类的区别

简述 在面向对象编程中&#xff0c;抽象类和接口是常被用到的语法概念&#xff0c;是面向对象四大特性&#xff0c;以及很多设计模式、设计思想、设计原则实现的基础。它们之间的区别是什么&#xff1f;什么时候用接口&#xff1f;什么时候用抽象类&#xff1f;抽象类和接口存…
阅读更多...
解决两个MySQL5.7报错

解决两个MySQL5.7报错

目录 1.启动不了MySQL&#xff0c;报错缺少MSVCR120.dll去官网下载vcredist_x64.exe运行安装进入管理员CMD 2.本地计算机 上的 mysql 服务启动后停止。某些服务在未由其他服务或程序使用时将自动停止&#xff0c;Fatal error: Can‘t open and lock privilege tables: Table ‘…
阅读更多...
wpf menu 菜单 快捷键

wpf menu 菜单 快捷键

界面快捷键资源 CtrlF F3可加入其它&#xff0c;自行定义 Page可改为Windows xaml文件 <Style TargetType"{x:Type DataGrid}"> <Setter Property"ContextMenu"> <Setter.Value> <ContextMenu St…
阅读更多...
实习日志28

实习日志28

1.医院账套系统换新&#xff0c;卡片数据转移 1.1.修改旧导出的Excel 1.2.尝试导入新系统 1.3.修改导入数据再次导入即可 这个系统做的限制条件比较多&#xff0c;代码健壮性不错。 先在Excel表格里改好批量的&#xff0c;再导入检查&#xff0c;改一些细节的比较快捷。 2.…
阅读更多...
套接字（Sockets）编程——逆向分析向

套接字（Sockets）编程——逆向分析向

套接字&#xff08;Sockets&#xff09;编程 套接字&#xff08;Sockets&#xff09;编程是一种网络编程技术&#xff0c;用于在不同计算机之间或同一台计算机上的不同进程之间进行通信。在套接字编程中&#xff0c;我们创建套接字&#xff0c;这是一个支持网络请求和响应的端…
阅读更多...
PHP安全

PHP安全

PHP安全 推荐链接PHP版本号隐藏 推荐链接 链接目录 PHP版本号隐藏 PHP 版本信息泄露 系统数据包 X-Powered-By 字段泄露了 PHP 具体版本信息 //找到php.ini文件 //要修改的位置&#xff0c;把expose_phpOn 改为 expose_phpOff //service php-fpm restart #apache服务器可使用…
阅读更多...
ChatGPT回答模式

ChatGPT回答模式

你发现了吗&#xff0c;ChatGPT的回答总是遵循这些类型方式。 目录 1.解释模式 2.类比模式 3.列举模式 4.限制模式 5.转换模式 6.增改模式 7.对比模式 8.翻译模式 9.模拟模式 10.推理模式 1.解释模式 ChatGPT 在回答问题或提供信息时&#xff0c;不仅仅给出…
阅读更多...
【Linux取经路】文件系统之缓冲区

【Linux取经路】文件系统之缓冲区

文章目录 一、先看现象二、用户缓冲区的引入三、用户缓冲区的刷新策略四、为什么要有用户缓冲区五、现象解释六、结语 一、先看现象 #include <stdio.h> #include <string.h> #include <unistd.h>int main() {const char* fstr "Hello fwrite\n"…
阅读更多...
HW面试常见知识点（新手认识版）

HW面试常见知识点（新手认识版）

shiro漏洞原理 shiro漏洞原理是攻击者利用shiro的默认密钥伪造cookie&#xff0c;触发JAVA反序列化执行命令或者写shell。 shiro工具原理 跑默认key shiro550和721的区别 721是需要有效的登录才可以 550不用登录就可以直接跑key log4j原理 log4j是一款通用日志记录工具&#xf…
阅读更多...
【思扬赠书 | 第3期】由面试题“Redis是否为单线程”引发的思考

【思扬赠书 | 第3期】由面试题“Redis是否为单线程”引发的思考

⛳️ 写在前面参与规则&#xff01;&#xff01;&#xff01; ✅参与方式&#xff1a;关注博主、点赞、收藏、评论&#xff0c;任意评论&#xff08;每人最多评论三次&#xff09; ⛳️本次送书1~4本【取决于阅读量&#xff0c;阅读量越多&#xff0c;送的越多】 很多人都遇到…
阅读更多...
设计模式-抽象工厂模式（C++）

设计模式-抽象工厂模式（C++）

抽象工厂模式是一种设计模式&#xff0c;它提供了一个接口来创建一系列相关或相互依赖的对象&#xff0c;而无需指定它们具体的类。下面是一个使用 C 实现抽象工厂模式的示例&#xff1a; // 抽象产品类 class AbstractProductA { public:virtual void DoSomething() 0; };cl…
阅读更多...
gitlab的使用

gitlab的使用

前一篇文章我们已经知道Git人人都是中心&#xff0c;那他们怎么交互数据呢&#xff1f; • 使用GitHub或者码云等公共代码仓库 • 使用GitLab私有仓库 目录 一、安装配置gitlab 安装 初始化 这里初始化完成以后需要记住一个初始密码 查看状态 二、使用浏览器访问&#xf…
阅读更多...
Math方法，以及三角函数计算

Math方法，以及三角函数计算

abs(x) 返回参数的绝对值 var xMath.abs(-5) //5floor(x) 向下舍入为最接近的整数。 var xMath.floor(2.1) //2ceil(x) 向上舍入为最接近的整数。 var xMath.ceil(2.1) //3fround(x) 最接近的&#xff08;32 位单精度&#xff09;浮点表示。 var xMath.fround(2.60) //2.59…
阅读更多...
小凡爬楼梯

小凡爬楼梯

解法&#xff1a; dp[i]:到第i阶梯&#xff0c;总共dp[i]种方案 状态转移方程&#xff1a; base condition: #include<iostream> #include<vector> #include<algorithm> using namespace std; #define endl \n int main() {vector<long long> dp(51…
阅读更多...
js数据处理util

js数据处理util

方法汇总 据时间范围生成时间刻度数据 /**params startDate 开始时间*params endDate 结束时间*params timeUnit 时间间隔,注意是毫秒数**/function createTimeUnitListByTimeRange(startDate, endDate, timeUnit){let startSeconds new Date(startDate).getTime();let endS…
阅读更多...
【前缀和】560. 和为 K 的子数组

【前缀和】560. 和为 K 的子数组

560. 和为 K 的子数组 解题思路 创建一个前缀和数组 preSum&#xff0c;其长度比原数组 nums 多 1。preSum[i] 表示 nums 中前 i 个元素的和。通过遍历 nums 数组&#xff0c;计算前缀和数组 preSum。 在嵌套的两个循环中&#xff0c;对所有可能的子数组进行穷举&#xff1a;…
阅读更多...
板块一 Servlet编程：第四节 HttpServletResponse对象全解与重定向 来自【汤米尼克的JAVAEE全套教程专栏】

板块一 Servlet编程：第四节 HttpServletResponse对象全解与重定向 来自【汤米尼克的JAVAEE全套教程专栏】

板块一 Servlet编程&#xff1a;第四节 HttpServletResponse对象全解与重定向 一、什么是HttpServletResponse二、响应数据的常用方法三、响应乱码问题字符流乱码字节流乱码 四、重定向&#xff1a;sendRedirect请求转发和重定向的区别 在上一节中&#xff0c;我们系统的学习了…
阅读更多...
最新文章

Copyright @ 2022~2023