Flutter-底部弹出框（Widget层级）

需求
  • 支持底部弹出对话框。
  • 支持手势滑动关闭。
  • 支持在widget中嵌入引用。
  • 支持底部弹出框弹出后不影响其他操作。
  • 支持弹出框中内容固定头部和下面列表时，支持触摸头部并在列表不在头部的时候支持滑动关闭
简述

通过上面的需求可知，就是在界面中可以支持底部弹出一个弹出框，但是又不影响除了这个弹出框外其他操作，同时支持手势滑动关闭。想到这里我们其实会想到一个控件DraggableScrollableSheet，Flutter提供一种可以支持在widget中引入的底部弹出布局，同时不影响其他的操作，所以我就使用这个控件测试了下，发现一个问题，就是当底部弹出框内容为上面有个头部，底部是个列表时，每次都需要列表滑动到顶部的时候才可以手势滑动关闭，所以需要支持触摸顶部布局也支持手势滑动关闭，所以在此控件上做一个修改。

效果

bottom_sheet.gif

代码如下
`import 'package:flutter/material.dart';/// 底部弹出Widget
/// 1、支持手势下拉关闭
/// 2、支持动画弹出收起
/// 3、支持弹出无法关闭
class DragBottomSheetWidget extends StatefulWidget {DragBottomSheetWidget({required Key key,required this.builder,this.duration,this.childHeightRatio = 0.8,this.onStateChange,}) : super(key: key);Function(bool)? onStateChange;final double childHeightRatio;final Duration? duration;final ScrollableWidgetBuilder builder;@overrideState<DragBottomSheetWidget> createState() => DragBottomSheetWidgetState();
}class DragBottomSheetWidgetState extends State<DragBottomSheetWidget>with TickerProviderStateMixin {final controller = DraggableScrollableController();//是否可以关闭bool isCanClose = true;//是否展开bool isExpand = false;double verticalDistance = 0;@overridevoid initState() {super.initState();}@overridevoid dispose() {controller.dispose();super.dispose();}Future show({bool isCanClose = true}) {return controller.animateTo(1,duration: widget.duration ?? const Duration(milliseconds: 200),curve: Curves.linear).then((value) {if (!isCanClose) {setState(() {this.isCanClose = isCanClose;});}});}void hide() {controller.animateTo(0,duration: widget.duration ?? const Duration(milliseconds: 200),curve: Curves.linear,);}void _dragJumpTo(double y) {var size = y / MediaQuery.of(context).size.height;controller.jumpTo(widget.childHeightRatio - size);}void _dragEndChange() {controller.size >= widget.childHeightRatio / 2? controller.animateTo(1,duration: widget.duration ?? const Duration(milliseconds: 200),curve: Curves.linear,): hide();}@overrideWidget build(BuildContext context) {return NotificationListener<DraggableScrollableNotification>(onNotification: (notification) {if (notification.extent == widget.childHeightRatio) {if (!isExpand) {isExpand = true;widget.onStateChange?.call(true);}} else if (notification.extent < 0.00001) {if (isExpand) {isExpand = false;widget.onStateChange?.call(false);}}return true;},child: DraggableScrollableSheet(initialChildSize: isCanClose && !isExpand ? 0 : widget.childHeightRatio,minChildSize: isCanClose ? 0 : widget.childHeightRatio,maxChildSize: widget.childHeightRatio,expand: true,snap: true,controller: controller,builder: (BuildContext context, ScrollController scrollController) {return GestureDetector(behavior: HitTestBehavior.translucent,onVerticalDragDown: (details) {verticalDistance = 0;},onVerticalDragUpdate: (details) {verticalDistance += details.delta.dy;_dragJumpTo(verticalDistance);},onVerticalDragEnd: (details) {_dragEndChange();},child: widget.builder.call(context, scrollController),);},),);}
}

使用

import 'package:flutter/material.dart';
import 'package:flutter_xy/widgets/xy_app_bar.dart';
import 'package:flutter_xy/xydemo/darg/drag_bottom_sheet_widget.dart';class DragBottomSheetPage extends StatefulWidget {const DragBottomSheetPage({super.key});@overrideState<DragBottomSheetPage> createState() => _DragBottomSheetPageState();
}class _DragBottomSheetPageState extends State<DragBottomSheetPage> {final GlobalKey<DragBottomSheetWidgetState> bottomSheetKey =GlobalKey<DragBottomSheetWidgetState>();bool isExpand = false;@overrideWidget build(BuildContext context) {return Scaffold(backgroundColor: Colors.deepPurple.withAlpha(50),appBar: XYAppBar(title: "底部弹出布局",backgroundColor: Colors.transparent,titleColor: Colors.white,onBack: () {Navigator.pop(context);},),body: Stack(children: [Positioned(top: 0,child: Column(mainAxisSize: MainAxisSize.max,children: [InkWell(onTap: () {if (isExpand) {bottomSheetKey.currentState?.hide();} else {bottomSheetKey.currentState?.show();}},child: Container(width: MediaQuery.of(context).size.width - 60,alignment: Alignment.center,height: 50,margin: const EdgeInsets.symmetric(horizontal: 30),decoration: BoxDecoration(borderRadius: BorderRadius.circular(32),color: Colors.deepPurple,),child: Text(isExpand ? "收起" : "弹出",style: const TextStyle(fontSize: 16,fontWeight: FontWeight.w600,color: Colors.white,),),),),const SizedBox(height: 20),],)),Positioned(child: DragBottomSheetWidget(key: bottomSheetKey,onStateChange: (isExpand) {setState(() {this.isExpand = isExpand;});},builder:(BuildContext context, ScrollController scrollController) {return Container(alignment: Alignment.topLeft,child: Stack(children: [Container(height: 50,decoration: const BoxDecoration(borderRadius: BorderRadius.only(topLeft: Radius.circular(16),topRight: Radius.circular(16)),color: Colors.yellow,),),Expanded(child: Container(margin: const EdgeInsets.only(top: 50),child: ListView.builder(itemCount: 500,controller: scrollController,itemBuilder: (context, index) {return index % 2 == 0? Container(height: 100,width: MediaQuery.of(context).size.width,color: Colors.red,): Container(height: 100,width: MediaQuery.of(context).size.width,color: Colors.blue,);},),),),],),);},),),],),);}
}

完整代码见：https://github.com/yixiaolunhui/flutter_xy

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

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

相关文章

最细致最简单的 Arm 架构搭建 Harbor

最细致最简单的 Arm 架构搭建 Harbor

更好的阅读体验&#xff1a;点这里 &#xff08; www.doubibiji.com &#xff09; ARM离线版本安装 官方提供了一个 arm 版本&#xff0c;但是好久都没更新了&#xff0c;地址&#xff1a;https://github.com/goharbor/harbor-arm 。 也不知道为什么不更新&#xff0c;我看…
阅读更多...
CTF题型 SSTI(1) Flask-SSTI-labs 通关 题记

CTF题型 SSTI(1) Flask-SSTI-labs 通关 题记

CTF题型 SSTI(1) Flask-SSTI-labs 通关 题记 文章目录 CTF题型 SSTI(1) Flask-SSTI-labs 通关 题记前记获取键值或下标的方式获取属性的方式 Level 1 no wafLevel 2 bl[\{\{]Level 3 no waf and blindLevel 4 bl[[, ]]获取键值或下标 Level 5 bl[\, "]Level 6 bl[_]Level …
阅读更多...
Redis 过期删除策略和内存淘汰策略有什么区别？

Redis 过期删除策略和内存淘汰策略有什么区别？

资料来源 : 小林coding 小林官方网站 : 小林coding (xiaolincoding.com) Redis 的「内存淘汰策略」和「过期删除策略」&#xff0c;很多小伙伴容易混淆&#xff0c;这两个机制虽然都是做删除的操作&#xff0c;但是触发的条件和使用的策略都是不同的。 今天就跟大家理一理&…
阅读更多...
webpack5零基础入门-11处理html资源

webpack5零基础入门-11处理html资源

1.目的 主要是为了自动引入打包后的js与css资源&#xff0c;避免手动引入 2.安装相关包 npm install --save-dev html-webpack-plugin 3.引入插件 const HtmlWebpackPlugin require(html-webpack-plugin); 4.添加插件&#xff08;通过new方法调用&#xff09; /**插件 *…
阅读更多...
【AAAI 2024】MuLTI：高效视频与语言理解

【AAAI 2024】MuLTI：高效视频与语言理解

一、背景 1.1 多模态的发展 多模态理解模型具有广泛的应用&#xff0c;比如多标签分类&#xff08;Classification&#xff09;、视频问答&#xff08;videoQA&#xff09;和文本视频检索&#xff08;Retrieval&#xff09;等。现有的方法已经在视频和语言理解方面取得了重大…
阅读更多...
从零开始学习深度学习库-4：自动微分

从零开始学习深度学习库-4：自动微分

欢迎来到本系列的第四部分&#xff0c;在这里我们将讨论自动微分 介绍 自动微分&#xff08;Automatic Differentiation&#xff0c;简称AD&#xff09;是一种计算数学函数导数&#xff08;梯度&#xff09;的技术。在深度学习和其他领域中&#xff0c;自动微分是一种极其重要…
阅读更多...
Ubuntu 搭建gitlab服务器，及使用repo管理

Ubuntu 搭建gitlab服务器，及使用repo管理

一、GitLab安装与配置 GitLab 是一个用于仓库管理系统的开源项目&#xff0c;使用Git作为代码管理工具&#xff0c;并在此基础上搭建起来的Web服务。 1、安装Ubuntu系统&#xff08;这个教程很多&#xff0c;就不展开了&#xff09;。 2、安装gitlab社区版本&#xff0c;有需…
阅读更多...
二、SQL基础学习（函数、约束、事务）

二、SQL基础学习（函数、约束、事务）

目录 1、函数1.1、字符串函数1.2、数值函数1.3、日期函数1.4 、流程函数 2、约束2.1、外键约束2.2、删除/更新行为 3、事务3.1、事务的四大特性3.2、并发事务问题3.2、事务的隔离级别 1、函数 1.1、字符串函数 # concat select concat(Hello, MySql);# lower select lower(He…
阅读更多...
Linux操作系统的安全相关介绍

Linux操作系统的安全相关介绍

Linux操作系统的安全模型、访问控制、安全策略和加密机制是确保系统安全的重要组成部分。下面将详细介绍这些方面。 安全模型 Linux操作系统的安全模型基于传统的Unix安全模型&#xff0c;主要包括以下核心概念&#xff1a; 1. **用户和组**&#xff1a;Linux系统中的每…
阅读更多...
外贸网站文章批量生成器

外贸网站文章批量生成器

随着全球贸易的不断发展&#xff0c;越来越多的企业开始关注外贸市场&#xff0c;而拥有高质量的内容是吸引潜在客户的关键之一。然而&#xff0c;为外贸网站生产大量优质的文章内容可能是一项耗时且繁琐的任务。因此&#xff0c;外贸网站文章批量生成软件成为了解决这一难题的…
阅读更多...
elk收集k8s微服务日志

elk收集k8s微服务日志

一、前言 使用filebeat自动发现收集k8s的pod日志&#xff0c;这里分别收集前端的nginx日志&#xff0c;还有后端的服务java日志&#xff0c;所有格式都是用json格式&#xff0c;建议还是需要让开发人员去输出java的日志为json&#xff0c;logstash分割java日志为json格式&#…
阅读更多...
如何选择合适的数据可视化工具？

如何选择合适的数据可视化工具？

如果是入门级的数据可视化工具&#xff0c;使用Excel插件就足够了&#xff01; Excel插件&#xff0c;tusimpleBI 是一款 Excel 图表插件&#xff0c;提供超过120项图表功能&#xff0c;帮助用户制作各种 Excel 所没有的高级图表&#xff0c;轻轻松松一键出图。 它能够制作10…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023