如何在 Flutter 中实现可拖动的底部弹出框

在 Flutter 开发中,底部弹出框(Bottom Sheet)是一种常见的 UI 组件,通常用于显示一些额外的操作选项或详细信息。在这篇文章中,我将介绍一个自定义的 DragBottomSheetWidget 组件,它不仅支持手势拖动关闭,还可以通过动画进行弹出和收起。

组件功能概述

DragBottomSheetWidget 是一个支持手势拖动和动画效果的底部弹出框组件。它具有以下几个主要功能:

  1. 手势下拉关闭:用户可以通过向下拖动来关闭底部弹出框。
  2. 动画弹出收起:支持平滑的动画效果,弹出或收起时更加自然。
  3. 弹出后无法关闭:在特定场景下,弹出框可以设置为无法通过手势关闭。
代码解析

首先,我们来看一下 DragBottomSheetWidget 的代码实现:

import 'package:flutter/material.dart';class DragBottomSheetWidget extends StatefulWidget {const DragBottomSheetWidget({super.key,required this.builder,this.duration = const Duration(milliseconds: 200),this.childHeightRatio = 0.8,this.onStateChange,});final Function(bool)? onStateChange;final double childHeightRatio;final Duration duration;final ScrollableWidgetBuilder builder;State<DragBottomSheetWidget> createState() => DragBottomSheetWidgetState();
}class DragBottomSheetWidgetState extends State<DragBottomSheetWidget> {final DraggableScrollableController controller =DraggableScrollableController();final ValueNotifier<bool> isExpandNotifier = ValueNotifier<bool>(false);double verticalDistance = 0;void initState() {super.initState();}void dispose() {controller.dispose();isExpandNotifier.dispose();super.dispose();}Future<void> show({bool isCanClose = true}) async {try {await controller.animateTo(1,duration: widget.duration,curve: Curves.linear,);if (!isCanClose) {isExpandNotifier.value = true;}} catch (e) {print('Error animating to full size: $e');}}void hide() {controller.animateTo(0,duration: widget.duration,curve: Curves.linear,);}void _dragJumpTo(double y) {final size = y / MediaQuery.sizeOf(context).height;final jumpToValue = widget.childHeightRatio - size;controller.jumpTo(jumpToValue.clamp(0, widget.childHeightRatio));}void _dragEndChange(DragEndDetails dragEndDetails) {if (controller.size >= widget.childHeightRatio / 2) {controller.animateTo(1,duration: widget.duration,curve: Curves.linear,);} else {hide();}}Widget build(BuildContext context) {return NotificationListener<DraggableScrollableNotification>(onNotification: (notification) {isExpandNotifier.value = notification.extent == widget.childHeightRatio;widget.onStateChange?.call(isExpandNotifier.value);return true;},child: ValueListenableBuilder<bool>(valueListenable: isExpandNotifier,builder: (context, isExpand, child) {return DraggableScrollableSheet(initialChildSize: !isExpand ? 0 : widget.childHeightRatio,minChildSize: 0,maxChildSize: widget.childHeightRatio,expand: true,snap: true,controller: controller,builder: (BuildContext context, ScrollController scrollController) {return _DragHandler(onDragDown: () => verticalDistance = 0,onDragUpdate: (details) {verticalDistance += details.delta.dy;_dragJumpTo(verticalDistance);},onDragEnd: _dragEndChange,child: widget.builder(context, scrollController),);},);},),);}
}class _DragHandler extends StatelessWidget {const _DragHandler({required this.onDragDown,required this.onDragUpdate,required this.onDragEnd,required this.child,});final VoidCallback onDragDown;final GestureDragUpdateCallback onDragUpdate;final GestureDragEndCallback onDragEnd;final Widget child;Widget build(BuildContext context) {return GestureDetector(behavior: HitTestBehavior.translucent,onVerticalDragDown: (_) => onDragDown(),onVerticalDragUpdate: onDragUpdate,onVerticalDragEnd: onDragEnd,child: child,);}
}
核心功能解读
  1. 控制器与状态管理:组件内部使用了 DraggableScrollableController 来控制弹出框的显示状态,ValueNotifier<bool> 用于监听弹出框的展开与收起状态。

  2. 显示与隐藏show 方法通过 animateTo 将弹出框平滑展开至全屏,而 hide 方法则将其收起至不可见状态。

  3. 手势控制:通过 _dragJumpTo 方法和 _dragEndChange 方法,组件可以响应用户的手势操作,决定弹出框的滑动与状态变化。

  4. Builder 模式:通过 builder 回调,开发者可以自定义弹出框中的内容,满足不同场景的需求。

使用场景

DragBottomSheetWidget 适用于需要在屏幕底部弹出一些交互式内容的场景,如表单输入、操作选项等。通过手势控制和动画效果,可以为用户提供更加流畅和直观的操作体验。

结语

自定义 DragBottomSheetWidget 组件不仅增强了 Flutter 的弹出框功能,还为用户提供了更多的交互可能性。如果你正在开发需要底部弹出框的应用,不妨尝试一下这个组件,为你的应用添加更丰富的交互体验。

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

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

相关文章

[leetcode]516_最长回文子序列

给你一个字符串 s &#xff0c;找出其中最长的回文子序列&#xff0c;并返回该序列的长度。 子序列定义为&#xff1a;不改变剩余字符顺序的情况下&#xff0c;删除某些字符或者不删除任何字符形成的一个序列。示例 1&#xff1a; 输入&#xff1a;s "bbbab" 输出&a…

使用 PowerShell 命令更改 RDP 远程桌面端口(无需修改防火墙设置)

节选自原文&#xff1a;Windows远程桌面一站式指南 | BOBO Blog 原文目录 什么是RDP&#xfffc;开启远程桌面 检查系统版本启用远程桌面连接Windows 在Windows电脑上在MAC电脑上在Android或iOS移动设备上主机名连接 自定义电脑名通过主机名远程桌面使用Hosts文件自定义远程主…

LeetCode 427. 建立四叉树

LeetCode 427. 建立四叉树 &#xff08;题干略&#xff09; """ # Definition for a QuadTree node. class Node:def __init__(self, val, isLeaf, topLeft, topRight, bottomLeft, bottomRight):self.val valself.isLeaf isLeafself.topLeft topLeftself.t…

进阶美颜功能技术开发方案:探索视频美颜SDK

视频美颜SDK&#xff08;SoftwareDevelopmentKit&#xff09;作为提升视频质量的重要工具&#xff0c;越来越多地被开发者关注与应用。接下俩&#xff0c;笔者将深入探讨进阶美颜功能的技术开发方案&#xff0c;助力开发者更好地利用视频美颜SDK。 一、视频美颜SDK的核心功能 …

HarmonyOS鸿蒙系统开发应用程序,免费开源DevEco Studio开发工具

DevEco Studio 是华为为 HarmonyOS 和 OpenHarmony 开发者提供的官方集成开发环境&#xff08;IDE&#xff09;&#xff0c;它基于 IntelliJ IDEA Community 版本打造&#xff0c;提供了代码编辑、编译、调试、发布等一体化服务。 一、DevEco Studio支持系统 DevEco Studio支持…

windows系统中后台运行java程序

在windows系统中后台运行java程序&#xff0c;就是在启动java程序后&#xff0c;关闭命令行行窗口执行。 1、命令行方式 命令行方式运行java程序 启动脚本如下&#xff1a; echo off start java -jar app.jar exit启动后的结果如下 这种方式下&#xff0c;会马上启动一个命…

【初阶数据结构】排序——选择排序

目录 前言选择排序堆排序 前言 对于常见的排序算法有以下几种&#xff1a; 下面这节我们来看选择排序算法。 选择排序 基本思想&#xff1a;   每一次从待排序的数据元素中遍历选出最大&#xff08;或最小&#xff09;的元素放在序列的起始位置&#xff0c;直到全部待排序…

DataGrip远程连接Hive

学会用datagrip远程操作hive 连接前提条件&#xff1a; 注意&#xff1a;mysql是否是开启状态 启动hadoop集群 start-all.sh 1、启动hiveserver2服务 nohup hiveserver2 >> /usr/local/soft/hive-3.1.3/hiveserver2.log 2>&1 & 2、beeline连接 beelin…

手机/平板端 Wallpaper 动态壁纸文件获取及白嫖使用指南

Wallpaper 动态壁纸文件获取及使用指南 目录 壁纸文件获取手机 / 平板使用手机 / 平板效果预览注意事项PC/Mac 使用 1. 壁纸文件获取链接 链接&#xff1a;夸克网盘分享 复制链接到浏览器打开并转存下载即可。 &#xff08;主页往期视频的 4K 原图和 mpkg 动态壁纸文件&#xf…

MySQL vs PostgreSQL:2024年深度对比与选择指南

目录 引言基本特性对比性能比较可扩展性数据类型和索引支持复制和高可用性安全性生态系统和社区支持云服务支持使用场景分析总结 引言 在选择关系型数据库管理系统&#xff08;RDBMS&#xff09;时&#xff0c;MySQL和PostgreSQL常常是开发者和企业面临的两个主要选项。本文…

历年图灵奖获奖者

历年图灵奖获奖者 图灵奖&#xff08;Turing Award&#xff09;&#xff0c;全称A.M.图灵奖&#xff08;ACM A.M Turing Award&#xff09;&#xff0c;是由美国计算机协会&#xff08;ACM&#xff09;于1966年设立的计算机奖项&#xff0c;名称取自艾伦麦席森图灵&#xff08…

机器学习-KNN

KNN&#xff1a;K最邻近算法&#xff08;K-Nearest Neighbor,KNN&#xff09; 用特征空间中距离待分类对象的最近的K个样例点的类别来预测。 投票法&#xff1a;K 个样例的对数类别。 k1:最近邻分类 k 通常是奇数&#xff08;因为我们根据这个K数据判断类别&#xff0c;如果…

Eslint配置

使用create vue创建的vue工程&#xff0c;碰到eslint的一些错误 1. 版本问题 在vue中安装的版本与vscode扩展中安装的版本不匹配&#xff0c;导致扩展中的Eslint的运行状态为尚未激活 2. vue中的Eslint配置与.prettierrc中的配置冲突 比如&#xff1a;prettierrc中设置单引…

探索 TensorFlow:构建强大的机器学习模型

探索 TensorFlow&#xff1a;构建强大的机器学习模型 TensorFlow&#xff0c;由Google开发并维护&#xff0c;是一个开源的机器学习库&#xff0c;广泛用于深度学习研究和生产。它提供了丰富的API和工具&#xff0c;使得构建、训练和部署复杂的机器学习模型变得简单而高效。在…

LeetCode 算法:只出现一次的数字 c++

原题链接&#x1f517;&#xff1a;只出现一次的数字难度&#xff1a;简单⭐️ 题目 给你一个 非空 整数数组 nums &#xff0c;除了某个元素只出现一次以外&#xff0c;其余每个元素均出现两次。找出那个只出现了一次的元素。 你必须设计并实现线性时间复杂度的算法来解决此…

深入探索机器学习中的目标分类算法

在当今数据驱动的世界中&#xff0c;机器学习&#xff08;Machine Learning, ML&#xff09;正逐渐成为解决问题的重要工具。在众多机器学习任务中&#xff0c;目标分类&#xff08;Classification&#xff09;算法尤其受到关注。本文将深入探讨目标分类算法的基本概念、常见类…

面试加分必看,11道接口安全测试面试题!

今天&#xff0c;分享一些在面试中可能会遇到的接口安全测试面试问题&#xff0c;助你在面试中从容不迫。 01.HTTPS 与 HTTP 的区别&#xff1f; 02.OSI七层模型是指&#xff1f; 03.你所知道的 HTTP 状态码&#xff1f; 04.你知道SQL注入吗&#xff1f; 05.SQL 注入与XSS…

js逆向——webpack实战案例(一)

今日受害者网站&#xff1a;https://www.iciba.com/translate?typetext 首先通过跟栈的方法找到加密位置 我们跟进u函数&#xff0c;发现是通过webpack加载的 向上寻找u的加载位置&#xff0c;然后打上断点&#xff0c;刷新网页&#xff0c;让程序断在加载函数的位置 u r.n…

基于php的在线租房管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码 精品专栏&#xff1a;Java精选实战项目…

vue3【实战】响应式主题(实时获取页面比例,指定尺寸内按比例缩放,超过指定尺寸保持高度不变的图片)

实时获取页面比例 移动端设计稿通常为 750px当前窗口的宽为 window.innerWidth通过 useResizeObserver 可实时监听窗口大小的变化 src/stores/theme.ts export const useThemeStroe defineStore(theme, () > {const rate ref(0)function setRate(newRate: number) {rate…