nodejs 网站开发模块,响应式网站发展,7154电商平台官网,湖南建筑行业需求
支持底部弹出对话框。支持手势滑动关闭。支持在widget中嵌入引用。支持底部弹出框弹出后不影响其他操作。支持弹出框中内容固定头部和下面列表时#xff0c;支持触摸头部并在列表不在头部的时候支持滑动关闭
简述
通过上面的需求可知#xff0c;就是在界面中可以支持…需求
支持底部弹出对话框。支持手势滑动关闭。支持在widget中嵌入引用。支持底部弹出框弹出后不影响其他操作。支持弹出框中内容固定头部和下面列表时支持触摸头部并在列表不在头部的时候支持滑动关闭
简述
通过上面的需求可知就是在界面中可以支持底部弹出一个弹出框但是又不影响除了这个弹出框外其他操作同时支持手势滑动关闭。想到这里我们其实会想到一个控件DraggableScrollableSheetFlutter提供一种可以支持在widget中引入的底部弹出布局同时不影响其他的操作所以我就使用这个控件测试了下发现一个问题就是当底部弹出框内容为上面有个头部底部是个列表时每次都需要列表滑动到顶部的时候才可以手势滑动关闭所以需要支持触摸顶部布局也支持手势滑动关闭所以在此控件上做一个修改。
效果 代码如下
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;overrideStateDragBottomSheetWidget createState() DragBottomSheetWidgetState();
}class DragBottomSheetWidgetState extends StateDragBottomSheetWidgetwith 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 NotificationListenerDraggableScrollableNotification(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});overrideStateDragBottomSheetPage createState() _DragBottomSheetPageState();
}class _DragBottomSheetPageState extends StateDragBottomSheetPage {final GlobalKeyDragBottomSheetWidgetState bottomSheetKey GlobalKeyDragBottomSheetWidgetState();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
