Flutter BottomSheet 拖动分两段展示

第一段

20231229-175102.jpeg

第二段

20231229-175107.jpeg

实现思路

通过 GestureDetector 的 Drag 方法,动态改变Dialog的高度,通过设置一个最大高度和最小高度分成两层进行展示

实现

常用的展示BottomSheet的方法为 showModalBottomSheet

/// 设置最高最好以高度的比例进行设置,方便不同屏幕适配
final maxHeight = MediaQuery.of(context).size.height * maxHeightRatio;
showModalBottomSheet(context: context,builder: (ctx) => BottomSheetDialog(minHeight: minHeight, maxHeight: maxHeight),enableDrag: false,isScrollControlled: true,scrollControlDisabledMaxHeightRatio: maxHeightRatio,
);

因为上面我们隐藏了自带的 DragHeader ,这里自定义一个可拖动的Header

GestureDetector(behavior: HitTestBehavior.opaque,/// 正在拖动onVerticalDragUpdate: (detail) {/// 得到当前的高度double dragOffset = _contentHeight - detail.delta.dy;if(dragOffset > maxHeight) {dragOffset = maxHeight;}if(dragOffset < 0) {dragOffset = 0;}setContentHeight(dragOffset);},/// 拖动结束onVerticalDragEnd: (detail) {print("onVerticalDragEnd");onDragEnd();},/// 取消拖动,当作拖动结束处理onVerticalDragCancel: () {onDragEnd();},child: Container(height: 55,alignment: Alignment.center,child: const Text("Drag"),),
),

拖动结束处理

void onDragEnd() {/// 以两段中间值为界限,回弹到指定的位置final mid = (maxHeight - minHeight) / 2 + minHeight;if(_contentHeight > mid) {setContentHeight(maxHeight);} else if(_contentHeight >= minHeight / 3 * 2) {setContentHeight(minHeight);} else {/// 当滑动到第一段下面位置时,就直接退出BottomSheetNavigator.pop(context);}
}

完整代码

import 'package:ebon_smart_pay/app/core/widgets/bottom_sheet/bottom_sheet_dialog.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';class BottomSheetPage extends StatelessWidget {const BottomSheetPage({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return AnnotatedRegion(value: const SystemUiOverlayStyle(statusBarColor: Colors.transparent),child: Center(child: FilledButton(onPressed: () => BottomSheetDialog.show(context, MediaQuery.of(context).size.height * 0.5, 0.75),child: const Text("ShowBottomSheet"),),),);}
}

import 'package:flutter/material.dart';class BottomSheetDialog extends StatefulWidget {/// 设置高度final double minHeight;final double maxHeight;const BottomSheetDialog({Key? key, required this.minHeight, required this.maxHeight}) : super(key: key);static void show(BuildContext context, double minHeight, double maxHeightRatio) {final maxHeight = MediaQuery.of(context).size.height * maxHeightRatio;showModalBottomSheet(context: context,builder: (ctx) => BottomSheetDialog(minHeight: minHeight, maxHeight: maxHeight),enableDrag: false,isScrollControlled: true,scrollControlDisabledMaxHeightRatio: maxHeightRatio,);}@overrideState<BottomSheetDialog> createState() => _BottomSheetDialogState();
}class _BottomSheetDialogState extends State<BottomSheetDialog> {double _contentHeight = 0;void setContentHeight(double height) => setState(() {_contentHeight = height;});@overridevoid initState() {setContentHeight(widget.minHeight);super.initState();}@overrideWidget build(BuildContext context) {return Container(height: _contentHeight,decoration: const BoxDecoration(borderRadius: BorderRadius.only(topLeft: Radius.circular(12), topRight: Radius.circular(12)),color: Colors.white),child: SafeArea(child: Column(mainAxisSize: MainAxisSize.min,children: [GestureDetector(behavior: HitTestBehavior.opaque,onVerticalDragUpdate: (detail) {double dragOffset = _contentHeight - detail.delta.dy;if(dragOffset > maxHeight) {dragOffset = maxHeight;}if(dragOffset < 0) {dragOffset = 0;}setContentHeight(dragOffset);},onVerticalDragEnd: (detail) {print("onVerticalDragEnd");onDragEnd();},onVerticalDragCancel: () {onDragEnd();},child: Container(height: 55,alignment: Alignment.center,child: const Text("Drag"),),),const Divider(),Expanded(child: ListView.separated(itemBuilder: (ctx, index) => Padding(padding: const EdgeInsets.all(10.0),child: Text("Item - $index"),),separatorBuilder: (ctx, index) => const Divider(),itemCount: 10))],),),);}void onDragEnd() {final mid = (maxHeight - minHeight) / 2 + minHeight;if(_contentHeight > mid) {setContentHeight(maxHeight);} else if(_contentHeight >= minHeight / 3 * 2) {setContentHeight(minHeight);} else {Navigator.pop(context);}}double get minHeight => widget.minHeight;double get maxHeight => widget.maxHeight;}

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

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

相关文章

FPGA设计时序约束十四、Set_External_Delay

一、序言 在时序约束中对clock的约束还存在一种特殊的延时约束set external delay。set external delay如字面含义&#xff0c;设置外部的时延值&#xff0c;但这个外部时延主要是指反馈时延&#xff0c;即信号从FPGA的output端口输出后经过外部电路回到输入端口的时延值。 二…

Linux:线程优先级设置

目录 一、背景二、调整普通线程的优先级通过系统命令通过Linux C代码 三、调整实时线程的优先级通过系统命令通过Linux C代码 四、参考资料&#xff08;建议一定要阅读&#xff09; 在操作系统中&#xff0c;线程优先级决定了线程在 CPU 调度时的重要性。较高优先级的线程会在竞…

服务器被黑了,记录一下

前两天刚开的新的服务&#xff0c;立马被黑&#xff0c;哈哈。有懂这个是什么黑组织吗&#xff0c;哈哈 All your data is backed up. You must pay 0.017 BTC to 1KdmpErgS3isFf8FrLaTfGHLQPKNsv839G In 48 hours, your data will be publicly disclosed and deleted. (more i…

GEE错误——‘xxx‘ did not match any bands.

这里我们在进行影像展示的时候会出现下面的错误,主要的原因是我们虽然进行了波段运算,但是依旧无法加载,主要原因是我们没有将计算过后的波段信息进行添加到我们的一个多波段影像,这里我们首先来看看代码出现的错误提示。当然这里只是给出了主要的问题,其实在进行波段运算…

Visual Basic入门指南(一)

Visual Basic入门指南 Visual Basic是一种由微软公司开发的简单、易学的编程语言。它被广泛应用于Windows应用程序的开发&#xff0c;并且有着强大的可视化编程能力。本文将介绍Visual Basic的基础知识和常用技巧&#xff0c;帮助读者快速入门。 环境准备 随便找一个软件安装…

java在线票务系统(选座)Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java servlet 在线票务系统&#xff08;选座&#xff09;管理系统是一套完善的java web信息管理系统 系统采用serlvetdaobean&#xff08;mvc模式)&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要…

PowerShell Instal 一键部署TeamCity

前言 TeamCity 是一个通用的 CI/CD 软件平台,可实现灵活的工作流程、协作和开发实践。允许在您的 DevOps 流程中成功实现持续集成、持续交付和持续部署。 系统支持 Centos7,8,9/Redhat7,8,9及复刻系列系统支持 Windows 10,11,2012,2016,2019,2022高版本建议使用9系列系统…

从0到1快速入门ETLCloud

一、ETLCloud的介绍 ETL是将业务系统的数据经过抽取&#xff08;Extract&#xff09;、清洗转换&#xff08;Transform&#xff09;之后加载&#xff08;Load&#xff09;到数据仓库的过程&#xff0c;目的是将企业中的分散、凌乱、标准不统一的数据整合到一起&#xff0c;为企…

CentOS7 系统安装

系统下载 官方下载 清华源下载 安装流程 1. 选择安装系统 2. 选择安装语言 3. 设置网络链接 4. 设置静态IP ![img](https://img-blog.csdnimg.cn/img_convert/53bfedd54b838f95bd8bcb2efa232e23.png)设置时区 5. 磁盘设置&#xff0c;无特殊需求默认就好 6. 安装模式选择 7…

Spark应用程序的结构与驱动程序

Apache Spark是一个强大的分布式计算框架&#xff0c;用于处理大规模数据。了解Spark应用程序的结构和驱动程序是构建高效应用的关键。本文将深入探讨Spark应用程序的组成部分&#xff0c;以及如何编写一个Spark驱动程序来处理数据和执行计算。 Spark应用程序的结构 Spark应用…

cleanmymac这个软件怎么样?值不值得下载

cleanmymac是我必装的mac端清理软件&#xff0c;界面简洁好看&#xff0c;完美适配mac系统&#xff0c;文件清理的速度、精度都比较优秀&#xff0c;还是比较不错的呢。cleanmymac作为一款第三方清洁应用程序&#xff0c;具有专业完整的清理功能&#xff0c;包括释放内存、一键…

【Redis交响乐】Redis中的通用命令

文章目录 1. 基本命令 get set2. 全局命令(1)keys(2)exists(3)del(4)expire && ttl面试题: redis中key的过期策略是怎么实现的?定时器的实现原理(1)基于优先级队列/堆(2)基于时间轮实现的定时器 (5) type 我们知道,redis是按照键值对的方式存储数据的. Redis中基本的命…

根据文法求对应的语言

技巧&#xff1a;最后得到的是终结符组成的闭包 例题&#xff1a; 文法G[S]: S-->AB A-->aAb|ab B-->Bc|&#xff0c;求对应的语言 ①S-->(aAb|ab)(Bc|) ②我们可以观察到&#xff0c;无论A-->aAb还是A-->ab&#xff0c;都一定会同时出现ab,…

Java学习——设计模式——结构型模式1

文章目录 结构型模式代理模式适配器模式 结构型模式 结构型模式主要涉及如何组合各种对象以便获得更好、更灵活的结构。虽然面向对象的继承机制提供了最基本的子类扩展父类的功能&#xff0c;但结构型模式不仅仅简单地使用继承&#xff0c;而更多地通过组合与运行期的动态组合来…

NModbus-一个C#的Modbus协议库实现

NModbus-一个基于C#实现的Modbus通信协议库 最近在学习C#的时候&#xff0c;因为之前做过环保设备时使用C做过环保设备采集使用到了Modbus协议&#xff0c;当时看了一下基于C语言开发的libmodbus库。所以特意搜索看了一下C#下有什么Modbus协议库&#xff0c;在Github上面找了一…

SONiC和ONL所依赖的Debian版本说明

Debian 的最新几个版本 下一代 Debian 正式发行版的代号为 trixie — 测试&#xff08;testing&#xff09;版 Debian 12 (bookworm) — 当前的稳定&#xff08;stable&#xff09;版 Debian 11 (bullseye) — 当前的旧的稳定&#xff08;oldstable&#xff09;版 Debian 10&a…

idea配置docker推送本地镜像到远程私有仓库

目录 1&#xff0c;搭建远程Docker 私有仓库 Docker registry 2&#xff0c;Windows10/11系统上安装Docker Desktop 3&#xff0c;idea 配置远程私有仓库地址 4&#xff0c;idea 配置Docker 5&#xff0c;idea在本地构建镜像 6&#xff0c;推送本地Docker镜像到远程 Dock…

线性代数——(期末突击)行列式(上)-行列式计算、行列式的性质

目录 行列式 行列式计算 逆序数 行列式的性质 转置 两行&#xff08;列&#xff09;互换 两行&#xff08;列&#xff09;对应相等 提公因子 两行&#xff08;列&#xff09;对应成比例 某行&#xff08;列&#xff09;为零 行列式分裂 行列式变换及三角行列式 行…

基于Freeswitch实现的Volte网视频通知应用

现在运营商的Volte网络已经很好的支持视频通话了&#xff0c;因此在原来的电话语音通知的基础上&#xff0c;可以更进一步实现视频的通知&#xff0c;让用户有更好的体验&#xff0c;本文就从技术角度&#xff0c;基于Freeswitch来实现此类应用&#xff08;本文假设读者已对Fre…

三台CentOS7.6虚拟机搭建Hadoop完全分布式集群(三)

这个是笔者大学时期的大数据课程使用三台CentOS7.6虚拟机搭建完全分布式集群的案例&#xff0c;已成功搭建完全分布式集群&#xff0c;并测试跑实例。 9 安装hbase 温馨提示&#xff1a;安装hbase先在master主节点上配置&#xff0c;然后远程复制到slave01或slave02 &#xf…