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

需求

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

简述

通过上面的需求可知，就是在界面中可以支持底部弹出一个弹出框，但是又不影响除了这个弹出框外其他操作，同时支持手势滑动关闭。想到这里我们其实会想到一个控件DraggableScrollableSheet，Flutter提供一种可以支持在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;@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