Flutter 通过BottomSheetDialog实现抖音打开评论区,内容自动上推、缩放效果

一、先来看下实现的效果

  • 实现上面的效果需要解决俩个问题
    • 当列表进行向下滑动到顶部的时候,继续滑动可以让弹窗向下收起来
    • 弹出上下拖动的时候,视图内容跟着上下移动、缩放大小

二、实现弹窗上下滑动的时候,动态改变内容区的位置和大小

  • 通过showModalBottomSheet显示底部对话框
showModalBottomSheet(context: context,isScrollControlled: true,backgroundColor: Colors.white,transitionAnimationController: _controller,builder: (_) {///省略部分代码...},
);

1、那问题来了,怎么去监听对话框当前显示的高度呢?

可以发现showModalBottomSheet有一个transitionAnimationController参数,这个就是对话框显示的动画控制器了值为[0,1],当全部显示是为1。
那么当将弹窗设为固定高度时,就可以通过这个值进行计算了

  • 假设我们顶部留的最小空间为:宽度 = 屏幕宽度,高度 = 屏幕宽度 / (16 / 9),那么对话框的高度就等与 屏幕高度 - 顶部高度
///屏幕宽度
double get screenWidth => MediaQuery.of(context).size.width;
///屏幕高度
double get screenHeight => MediaQuery.of(context).size.height;
///顶部留的高度
double get topSpaceHeight => screenWidth / (16 / 9);
///对话框高度
double get bottomSheetHeight => screenHeight - topSpaceHeight;

2、监听对话框高度改变


void initState() {super.initState();_controller = BottomSheet.createAnimationController(this);_controller.addListener(() {final value = _controller.value * bottomSheetHeight;///更新UI_bottomSheetController.sink.add(value);});
}
Widget build(BuildContext context) {final bottom = MediaQuery.of(context).padding.bottom;return ColoredBox(color: Colors.black,child: Stack(children: [StreamBuilder<double>(stream: _bottomSheetController.stream,initialData: 0,builder: (_, snapshot) {return Container(height: screenHeight - snapshot.data!,alignment: Alignment.center,child: Image.network('https://5b0988e595225.cdn.sohucs.com/images/20200112/75b4a498fdaa48c7813419c2d4bac477.jpeg',),);},),],),);
}

通过上面这样处理,内容区的上移和缩小就已经实现了

三、弹窗内容向下滑动,当滑动到顶继续向下滑动时,可以让对话框继续向下滑动(不打断此次触摸事件)

  • 这里借鉴了这位博主的解决方案可以先看一下,https://www.jianshu.com/p/4f2d10750f5c

1、在向下滑动到顶,继续向下的时候,动态改变弹窗内部的高度来达到弹窗下拉的效果,这里本来是想通过改变transitionAnimationController.value的值来改变弹窗的高度,但是实际中发现或的效果不理想,不知道为什么


Widget build(BuildContext context) {return StreamBuilder<double>(stream: _dragController.stream,initialData: widget.height,builder: (context, snapshot) {return AnimatedContainer(height: snapshot.data ?? widget.height,duration: const Duration(milliseconds: 50),child: Column(children: [widget.pinedHeader ?? const SizedBox.shrink(),Expanded(child: Listener(onPointerMove: (event) {///没有滚动到顶部不处理if (_scrollController.offset != 0) {return;}///获取滑动到顶部开始下拉的位置_startY ??= event.position.dy;final distance = event.position.dy - _startY!;///弹窗滑动后剩余高度if ((widget.height - distance) > widget.height) {return;}_dragController.sink.add(widget.height - distance);///剩余弹出高度所占百分比final percent = 1 - distance / widget.height;///为了处理图片大小缩放需要使用widget.transitionAnimationController.value = percent;},/// 触摸事件结束 恢复可滚动onPointerUp: (event) {_startY = null;if (snapshot.data! <= widget.height * 0.5) {///下拉到了一半直接关闭widget.transitionAnimationController.animateTo(0,duration: const Duration(microseconds: 250));} else {///未到一半 恢复展示_dragController.sink.add(widget.height);widget.transitionAnimationController.animateTo(1,duration: const Duration(microseconds: 250));}},child: SingleChildScrollView(controller: _scrollController,physics: snapshot.data == widget.height? const ClampingScrollPhysics(): const NeverScrollableScrollPhysics(),child: widget.child,),),),],),);},);
}

2、解决原理:

  • 使用Listener包裹底部可滚动组件,然后监听用户的滑动,当滑动到了最顶部且继续向下滑动就将SingleChildScrollViewphysics设置为不可滚动
  • 同时改变内容的高度,同时也要改变transitionAnimationController.value的值这样内容区才会跟着移动,缩放
  • 最后在触摸结束的时候进行判断是需要收起弹窗还是关闭弹窗

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

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

相关文章

PPT 生成整数序列字典序的r-组合算法

生成整数序列字典序的r-组合算法 一、PPT效果展示二、问题2.1 简述2.2 算法简述2.3 例子 三、PPT实现 一、PPT效果展示 二、问题 2.1 简述 给定一个整数序列 (1&#xff0c;2&#xff0c;3&#xff0c;…n)&#xff0c;输出其所有字典序的r-组合&#xff0c;注意事项&#xf…

前端html原生页面兼容多端H5和移动端适配方案

目录 图片代码最后 图片 是一个注册页面 代码 自己查看效果 注意: 单位全部用rem这样才能保证兼容性适配多端&#xff0c;px转rem转换公式 1px 1/37.5rem 所以想要20px应该对应20/37.5 0.53rem <!DOCTYPE html> <html lang"en"><head><met…

关于时空数据的培训 GAN:实用指南(第 01/3 部分)

第 1 部分&#xff1a;深入了解 GAN 训练中最臭名昭著的不稳定性。 一、说明 GAN 是迄今为止最受欢迎的深度生成模型&#xff0c;主要是因为它们最近在图像生成任务上产生了令人难以置信的结果。然而&#xff0c;GAN并不容易训练&#xff0c;因为它们的基本设计引入了无数的不稳…

可变参数JAVA

public class Main {public static void main(String[] args) {//方法形参的个数是可以变化的//格式&#xff1a;属性类型...名字System.out.println(getSum(1,2,3,4,5,6,7,8));}//通过键值对对象来遍历&#xff1b;public static int getSum(int a,int...args){//可变参数;int…

ArcGIS 10.7安装教程!

软件介绍&#xff1a;ArcGIS是一款专业的电子地图信息编辑和开发软件&#xff0c;提供一种快速并且使用简单的方式浏览地理信息&#xff0c;无论是2D还是3D的信息。软件内置多种编辑工具&#xff0c;可以轻松的完成地图生产全过程&#xff0c;为地图分析和处理提供了新的解决方…

【蓝桥杯选拔赛真题60】Scratch旋转风车 少儿编程scratch图形化编程 蓝桥杯选拔赛真题解析

目录 scratch旋转风车 一、题目要求 编程实现 二、案例分析 1、角色分析

Linux自动化构建项目工具——Makefile/makefile

目录 一&#xff0c;背景知识 二&#xff0c;makefile/Makefile的编写 1.创建makefile/Makefile文件 2.在Makefile文件里写编译代码 3.伪目标——.PHONY 1.伪目标的特点 2.怎样实现总是被执行 4.Makefile/makefile文件的不同编写风格 1.背景知识 2.改写 一&#xff0c;背…

goaccess 日志分析 nginx

分析命令&#xff1a; goaccess -a -d -f /mnt/winshare/access-2023070112.log -p goaccess.conf -o /mydata/nginx/html/2023070112_new.html分析日志时的参数 goaccess使用参数详解-a 开启 UserAgent 列表。开启后会降低解析速度 -c 在程序开始运行时显示 日志/日期 配…

nbcio-boot移植到若依ruoyi-nbcio平台里一formdesigner部分(三)

因为这个版本的若依plus不支持本地文件上传&#xff0c;所以需要增加这些本地上传文件的后端代码 和前端代码修改。 1、后端部分 先配置跳过测试吧&#xff0c;平时编译也不需要这个 <!--添加配置跳过测试--><plugin><groupId>org.apache.maven.plugins<…

新增动态排序图、桑基图、AntV组合图,DataEase开源数据可视化分析平台v1.18.10发布

2023年9月14日&#xff0c;DataEase开源数据可视化分析平台正式发布v1.18.10版本。 这一版本的功能升级包括&#xff1a;数据集方面&#xff0c;对字段管理的后台保存做了相关优化&#xff0c;降低了资源消耗&#xff1b;仪表板方面&#xff0c;对联动、查询结果以及过滤组件等…

分享!JetBrains IDE中的GitLab支持

GitLab是流行的基于git的软件开发和部署平台之一&#xff0c;虽然很长一段时间以来&#xff0c;所有基本git操作都已经可以通过GitLab实现&#xff0c;但GitLab集成仍是JetBrains社区的一大最热门请求。为此&#xff0c;JetBrains团队今年与GitLab联手提供了这种类型的集成。 …

PWA及小程序在系统生态方面的支持对比

PWA代表“渐进式网络应用”&#xff08;Progressive Web Application&#xff09;。它是一种结合了网页和移动应用程序功能的技术概念。PWA旨在提供类似于原生应用程序的用户体验&#xff0c;包括离线访问、推送通知、后台同步等功能&#xff0c;同时又具有网页的优势&#xff…

SQL SERVER 中无法删除table ‘biao’,因为它不存在或者您不具备相应的权限

删除table表 1.删除表示提示&#xff1a;SQL SERVER 中无法删除table ‘biao’&#xff0c;因为它不存在或者您不具备相应的权限。2.原因3.解决方法3.1 图3.2 图3.3 图3.4 图 1.删除表示提示&#xff1a;SQL SERVER 中无法删除table ‘biao’&#xff0c;因为它不存在或者您不具…

Linux基础入门

一、操作系统安装方法 1、使用u盘安装 工具&#xff08;前提条件&#xff09;&#xff1a; <1>u盘 <2>镜像文件iso/msdn.itellyou.cn <3>把u盘做成PE&#xff1a;大白菜/老毛桃/winPE/软碟通/ultralSO 设置BIOS&#xff1a;通过u盘启动 安装系统&…

go 包的引入

本文介绍下下go包的管理&#xff0c;以linux平台为例。 先看下目录结构&#xff1a; test目录下的test.go test2目录下的test.go 主函数的调用 此时执行会报错&#xff0c;需要用mod进行包的管理,执行下面命令 go mod init godir 生成go.mod文件 执行结果&#xff1a;

【Spring Boot】数据缓存Redis实现高并发 —— Redis入门

&#x1f33f;欢迎来到衍生星球的CSDN博文&#x1f33f; &#x1f341;本文主要学习Redis的入门 &#x1f341; &#x1f331;我是衍生星球&#xff0c;一个从事集成开发的打工人&#x1f331; ⭐️喜欢的朋友可以关注一下&#x1faf0;&#x1faf0;&#x1faf0;&#xff0c;…

【Redis】深入探索 Redis 的数据类型 —— 列表 List

文章目录 一、List 类型介绍二、List 类型相关命令2.1 LPUSH 和 RPUSH、LPUSHX 和 RPUSHX2.2 LPOP 和 RPOP、BLPOP 和 BRPOP2.3 LRANGE、LINDEX、LINSERT、LLEN2.4 列表相关命令总结 三、List 类型内部编码3.1 压缩列表&#xff08;ziplist&#xff09;3.2 链表&#xff08;lin…

1-5 AUTOSAR数据交换文件ARXML

总目录——AUTOSAR入门详解AUTOSAR入门详解目录汇总&#xff1a;待续中。。。https://xianfan.blog.csdn.net/article/details/132818463 目录 一、Arxml文件 二、各类ARXML文件 一、Arxml文件 arxml文件是AUTOSAR&#xff08;Automotive Open System Architecture&#xff0…

nbcio-boot移植到若依ruoyi-nbcio平台里一formdesigner部分(四)

到目前为止&#xff0c;虽然基础的formdesigner部分已经完成&#xff0c;但流程用formdesigner提交与审批过程中的显示还有问题。 1、后端部分 其中FormConf修改如下&#xff1a; package com.ruoyi.flowable.core;import lombok.Data;import java.util.List; import java.uti…

Python用若干列的数据多条件筛选、去除Excel数据并批量绘制直方图

本文介绍基于Python&#xff0c;读取Excel数据&#xff0c;以一列数据的值为标准&#xff0c;对这一列数据处于指定范围的所有行&#xff0c;再用其他几列数据数值&#xff0c;加以筛选与剔除&#xff1b;同时&#xff0c;对筛选与剔除前、后的数据分别绘制若干直方图&#xff…