網站首頁 編程語言 正文
使用
通過監聽滾動事件實現DragOpenDrawer 組件,可以給滾動組件添加一個下拉抽屜。其使用方式如下:
DragOpenDrawer( ? openDuration: Duration(microseconds: 900), ? closeDuration: Duration(milliseconds: 300), ? onOpen: (){ ? ? print("onOpen"); ? }, ?child: Column( ? ? ? children: [ ? ? ? ? Expanded( ? ? ? ? ? child: ListView.builder( ? ? ? ? ? ? ? itemCount: 40, ? ? ? ? ? ? ? itemBuilder: (context,index){ ? ? ? ? ? ? return ListTile(title: Text("$index"),); ? ? ? ? ? }), ? ? ? ? ), ? ? ? ] ? ? ), ? backgroundBuilder: (context){ ? ? return Container(child: FlutterLogo(style: FlutterLogoStyle.stacked,),color: Colors.blue[200],); ? }, ),
組件參數說明
- openDuration:抽屜打開動畫持續的時間
- closeDuration: 抽屜關閉動畫持續的時間
- onOpen: 抽屜打開事件回調
- child: DragOpenDrawer 組件監聽的滾動組件
- backgroundBuilder:抽屜打開后展示的組件
運行效果
源碼
import 'package:flutter/material.dart'; enum _DragOpenDrawerMode{ ? // 正在拖動 ? dragging, ? // 抽同打開事件已經觸發 ? done, ? // 抽屜處于關閉狀態 ? canceled, ? // 抽屜已經打開了 ? opened, } class DragOpenDrawer extends StatefulWidget { ? const DragOpenDrawer({ ? ? required this.child, ? ? required this.backgroundBuilder, ? ? this.onOpen, ? ? this.openDuration = ?const Duration(seconds: 1), ? ? this.closeDuration = const Duration(seconds: 1), ? ? Key? key}) : super(key: key); ? final Widget Function(BuildContext context) backgroundBuilder; ? final Widget ?child; ? /// 抽屜打開時的回調函數 ? final void Function()? onOpen; ? final Duration openDuration; ? final Duration closeDuration; ? @override ? _DragOpenDrawerState createState() => _DragOpenDrawerState(); } class _DragOpenDrawerState extends State<DragOpenDrawer> with SingleTickerProviderStateMixin { ? late AnimationController _controller; ? late double _maxHeight; ? double _dragOffset = .0; ? bool _openTriggered = false; ? _DragOpenDrawerMode _dragOpenDrawerMode = _DragOpenDrawerMode.canceled; ? @override ? void initState() { ? ? super.initState(); ? ? _controller = AnimationController(vsync: this); ? } ? @override ? void dispose() { ? ? _changeDragOpenDrawerMode(_DragOpenDrawerMode.canceled); ? ? _controller.dispose(); ? ? super.dispose(); ? } ? @override ? Widget build(BuildContext context) { ? ? return LayoutBuilder( ? ? ? builder: (BuildContext context, BoxConstraints constraints) { ? ? ? ? _maxHeight = constraints.maxHeight; ? ? ? ? return ?WillPopScope( ? ? ? ? ? onWillPop: () async{ ? ? ? ? ? ? if(_dragOpenDrawerMode == _DragOpenDrawerMode.opened){ ? ? ? ? ? ? ? _changeDragOpenDrawerMode(_DragOpenDrawerMode.canceled); ? ? ? ? ? ? ? return false; ? ? ? ? ? ? } ? ? ? ? ? ? return true; ? ? ? ? ? }, ? ? ? ? ? child: Stack( ? ? ? ? ? ? alignment: Alignment.topCenter, ? ? ? ? ? ? children: [ ? ? ? ? ? ? ? SizedBox( ? ? ? ? ? ? ? ? width: double.infinity, ? ? ? ? ? ? ? ? height: double.infinity, ? ? ? ? ? ? ? ? child: ScaleTransition( ? ? ? ? ? ? ? ? ? ? alignment: Alignment.topCenter, ? ? ? ? ? ? ? ? ? ? scale: _controller, ? ? ? ? ? ? ? ? ? ? child: widget.backgroundBuilder(context)), ? ? ? ? ? ? ? ), ? ? ? ? ? ? ? AnimatedBuilder( ? ? ? ? ? ? ? ? animation: _controller, ? ? ? ? ? ? ? ? builder: (BuildContext context, Widget? child) { ? ? ? ? ? ? ? ? ? return ?Positioned( ? ? ? ? ? ? ? ? ? ? top: Tween(begin: .0, end: _maxHeight).evaluate(_controller), ? ? ? ? ? ? ? ? ? ? height: _maxHeight, ? ? ? ? ? ? ? ? ? ? width: constraints.maxWidth, ? ? ? ? ? ? ? ? ? ? child: NotificationListener( ? ? ? ? ? ? ? ? ? ? ? ? onNotification: (notification){ ? ? ? ? ? ? ? ? ? ? ? ? ? if(notification is OverscrollNotification){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(notification.overscroll >= 0){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return true; ? ? ? ? ? ? ? ? ? ? ? ? ? ? }else{ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? _dragOffset -= notification.overscroll; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? _changeDragOpenDrawerMode(_DragOpenDrawerMode.dragging); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(_dragOffset >_maxHeight/4){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? _changeDragOpenDrawerMode(_DragOpenDrawerMode.done); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? ? }else if(notification is ScrollEndNotification && _dragOpenDrawerMode != _DragOpenDrawerMode.done){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? _controller ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ..duration = widget.closeDuration ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ..reverse().then((value) => _dragOffset = .0); ? ? ? ? ? ? ? ? ? ? ? ? ? }else if(notification is ScrollEndNotification && _dragOpenDrawerMode == _DragOpenDrawerMode.done){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? _changeDragOpenDrawerMode(_DragOpenDrawerMode.opened); ? ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? ? return true; ? ? ? ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? ? ? ? ? child: child ?? SizedBox()), ? ? ? ? ? ? ? ? ? ); ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? child:Container( ? ? ? ? ? ? ? ? ? color: Colors.white, ? ? ? ? ? ? ? ? ? height: _maxHeight, ? ? ? ? ? ? ? ? ? child: widget.child ? ? ? ? ? ? ? ? ), ? ? ? ? ? ? ? ), ? ? ? ? ? ? ], ? ? ? ? ? ), ? ? ? ? ); ? ? ? }, ? ? ); ? } ? _changeDragOpenDrawerMode(_DragOpenDrawerMode newMode)async{ ? ? _dragOpenDrawerMode = newMode; ? ? switch (newMode){ ? ? ? case _DragOpenDrawerMode.canceled : { ? ? ? ? _controller.duration = widget.closeDuration; ? ? ? ? await _controller.reverse(); ? ? ? ? _openTriggered = false; ? ? ? ? _dragOffset = .0; ? ? ? ? break; ? ? ? } ? ? ? case _DragOpenDrawerMode.dragging: ? ? ? ? _controller.duration = Duration(seconds: 0); ? ? ? ? await ?_controller.animateTo(_dragOffset/_maxHeight); ? ? ? ? break; ? ? ? case _DragOpenDrawerMode.opened: ? ? ? ? _controller.duration = widget.openDuration; ? ? ? ? await _controller.forward(); ? ? ? ? break; ? ? ? case _DragOpenDrawerMode.done: ? ? ? ? if(!_openTriggered){ ? ? ? ? ? widget.onOpen!.call(); ? ? ? ? } ? ? ? ? _openTriggered = true; ? ? ? ? break; ? ? ? default: ? ? ? ? //executeUnknown(); ? ? } ? } }
原文鏈接:https://juejin.cn/post/7064012496956293133
相關推薦
- 2022-09-13 EvenLoop模型在iOS的RunLoop應用示例_Swift
- 2022-04-03 Python?Flask?+?Redis?程序練習_python
- 2022-04-18 Python?字典(Dictionary)詳細介紹_python
- 2022-09-25 Idea maven項目報錯:Unable to import maven project: See
- 2022-01-28 mybatis事務DefaultSqlSession-策略模式
- 2022-10-27 React事件處理和表單的綁定詳解_React
- 2022-12-05 Android自定義view實現左滑刪除的RecyclerView詳解_Android
- 2022-06-29 pytorch部署到jupyter中的問題及解決方案_python
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支