03_Flutter自定义下拉菜单

03_Flutter自定义下拉菜单

在Flutter的内置api中，可以使用showMenu实现类似下拉菜单的效果，或者使用PopupMenuButton组件，PopupMenuButton内部也是使用了showMenu这个api，但是使用showMenu时，下拉面板的显示已经被约定死了，只能放一个简单的列表，没有办法定制下来面板的ui，并且下拉面板的宽高需要通过指定constraints进行限制，下面是一个简单的showMenu的用法:

Container(height: 44,margin: EdgeInsetsDirectional.only(top: 30, start: 30, end: 30),color: Colors.red,child: Builder(builder: (context) {return GestureDetector(onTap: () {final RenderBox button = context.findRenderObject()! as RenderBox;final RenderBox overlay = Navigator.of(context).overlay!.context.findRenderObject()! as RenderBox;Offset offset = Offset(0.0, button.size.height);RelativeRect position = RelativeRect.fromRect(Rect.fromPoints(button.localToGlobal(offset, ancestor: overlay),button.localToGlobal(button.size.bottomRight(Offset.zero) + offset, ancestor: overlay),),Offset.zero & overlay.size,);showMenu(context: context,position: position,constraints: BoxConstraints(maxWidth: 315, maxHeight: 200),items: List.generate(5, (index) => PopupMenuItem(child: Container(width: 375,height: 44,alignment: AlignmentDirectional.center,child: Text("item"),))));},);},),
)

在这里插入图片描述

接下来，我们将参照showMenu的源码，依葫芦画个瓢，自定义一个下拉菜单的api，并可自由定制下拉面板的布局内容，篇幅有点长，请耐心观看。

一.确定下拉面板的起始位置

查看PopupMenuButton的源码，可以知道，PopupMenuButton在确定下拉面板的起始位置时，是先获取下拉面板依赖的按钮的边界位置和整个页面的显示区域边界，通过这两个边界计算得到一个RelativeRect，这个RelativeRect就是用来描述下拉面板的起始位置的。

showPopup(BuildContext context) {final RenderBox button = context.findRenderObject()! as RenderBox;final RenderBox overlay = Navigator.of(context).overlay!.context.findRenderObject()! as RenderBox;Offset offset = Offset(0.0, button.size.height);RelativeRect position = RelativeRect.fromRect(Rect.fromPoints(button.localToGlobal(offset, ancestor: overlay),button.localToGlobal(button.size.bottomRight(Offset.zero) + offset, ancestor: overlay),),Offset.zero & overlay.size,);
}

注：上述代码中用的的context对象，必须是下拉面板依赖的按钮对应的context，否则最后计算出来的RelativeRect是不对的。计算过程不做过多解释了，直接上图：

在这里插入图片描述

二.确定下拉面板的布局约束

  • 水平方向确定最大宽度，比较简单，下拉面板的最大宽度和它所依赖的按钮的宽度一致即可
  • 垂直方向上的最大高度，上一步已经确定了position的值，垂直方向上的最大高度可以取position.top - buttonHeight - padding.top - kToolbarHeight和constraints.biggest.height - position.top - padding.bottom的最大值，padding为安全区域的大小
  • 使用CustomSingleChildLayout作为下拉面板的父容器，并实现一个SingleChildLayoutDelegate，重写getConstraintsForChild，确定约束
EdgeInsets padding = MediaQuery.paddingOf(context);class _CustomPopupRouteLayout extends SingleChildLayoutDelegate {final RelativeRect position;_CustomPopupRouteLayout(this.position);@overrideBoxConstraints getConstraintsForChild(BoxConstraints constraints) {Size buttonSize = position.toSize(constraints.biggest);double constraintsWidth = buttonSize.width;double constraintsHeight = max(position.top - buttonSize.height - padding.top - kToolbarHeight, constraints.biggest.height - position.top - padding.bottom);return BoxConstraints.loose(Size(constraintsWidth, constraintsHeight));}@overridebool shouldRelayout(covariant _CustomPopupRouteLayout oldDelegate) {return position != oldDelegate.position;}
}

三.显示下拉面板

我们先把下拉面板显示出来看看效果，这里的下拉面板其实是一个弹出层，而在Flutter中，所有的弹出层的显示和页面路由是一样的，都是通过Navigator.push进行显示，参照showMenu的源码，这里的弹出层我们让其继承PopupRoute

class _CustomPopupRoute<T> extends PopupRoute<T> {final RelativeRect position;@overridefinal String? barrierLabel;_CustomPopupRoute({required this.position,required this.barrierLabel,});@overrideColor? get barrierColor => null;@overridebool get barrierDismissible => true;@overrideDuration get transitionDuration => Duration(milliseconds: 200);@overrideWidget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {return CustomSingleChildLayout(delegate: _CustomPopupRouteLayout(position),child: Material(child: Container(color: Colors.yellow,width: double.infinity,height: double.infinity,alignment: AlignmentDirectional.center,child: Text("popup content"),),),);}}

showPopup(BuildContext context) {final RenderBox button = context.findRenderObject()! as RenderBox;final RenderBox overlay = Navigator.of(context).overlay!.context.findRenderObject()! as RenderBox;Offset offset = Offset(0.0, button.size.height);RelativeRect position = RelativeRect.fromRect(Rect.fromPoints(button.localToGlobal(offset, ancestor: overlay),button.localToGlobal(button.size.bottomRight(Offset.zero) + offset, ancestor: overlay),),Offset.zero & overlay.size,);Navigator.of(context).push(_CustomPopupRoute(position: position, barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel));
}

在这里插入图片描述

如图，黄色区域就是下拉面板，可以看到，点击按钮下拉面板显示，点击下拉面板以外的区域，下拉面板关闭，但是位置好像不对，因为我们根本就没去确定下拉面板的位置。

四.确定下拉面板的位置

@override
Offset getPositionForChild(Size size, Size childSize) {return super.getPositionForChild(size, childSize);
}

只需要重写SingleChildLayoutDelegate的getPositionForChild方法，返回一个Offset对象，Offset的x、y的值就代表下拉面板左上角的位置，那么问题来了，x、y的值怎么确定？

  • 确定x

    x = position.left

  • 确定y

    • position.top + constraintsHeight > size.height - paddingBottom 时

    在这里插入图片描述

    • position.top + constraintsHeight <= size.height - paddingBottom 时

    在这里插入图片描述

EdgeInsets padding = MediaQuery.paddingOf(context);class _CustomPopupRouteLayout extends SingleChildLayoutDelegate {final RelativeRect position;EdgeInsets padding;_CustomPopupRouteLayout(this.position, this.padding);@overrideBoxConstraints getConstraintsForChild(BoxConstraints constraints) {Size buttonSize = position.toSize(constraints.biggest);double constraintsWidth = buttonSize.width;double constraintsHeight = max(position.top - buttonSize.height - padding.top - kToolbarHeight, constraints.biggest.height - position.top - padding.bottom);return BoxConstraints.loose(Size(constraintsWidth, constraintsHeight));}@overrideOffset getPositionForChild(Size size, Size childSize) {double x = position.left;double y = position.top;final double buttonHeight = size.height - position.top - position.bottom;double constraintsHeight = max(position.top - buttonHeight - padding.top - kToolbarHeight, size.height - position.top - padding.bottom);if(position.top + constraintsHeight > size.height - padding.bottom) {y = position.top - childSize.height - buttonHeight;}return Offset(x, y);}@overridebool shouldRelayout(covariant _CustomPopupRouteLayout oldDelegate) {return position != oldDelegate.position || padding != oldDelegate.padding;}
}

六.下拉动画实现

创建动画插值器，其值从0 ~ 1之间变化，动画时长为PopupRoute中重写的transitionDuration，及200ms时间内，从0变到1，或者从1变到0

final CurveTween heightFactorTween = CurveTween(curve: const Interval(0.0, 1.0));

使用AnimatedBuilder改造PopupRoute的布局结构，根据heightFactorTween的动画执行值 * 下拉菜单内容容器的高度，改变拉菜单内容的高度即可，这里暂时将高度设置为固定值300。

class _CustomPopupRoute<T> extends PopupRoute<T> {...@overrideWidget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {EdgeInsets padding = MediaQuery.paddingOf(context);final CurveTween heightFactorTween = CurveTween(curve: const Interval(0.0, 1.0));return MediaQuery.removePadding(context: context,removeTop: true,removeBottom: true,removeLeft: true,removeRight: true,child: CustomSingleChildLayout(delegate: _CustomPopupRouteLayout(position, padding),child: AnimatedBuilder(animation: animation,builder: (context, child) {return Material(child: Container(height: 300*heightFactorTween.evaluate(animation),child: child,));},child: Container(color: Colors.yellow,width: double.infinity,height: 300,alignment: AlignmentDirectional.center,child: Text("popup content"),),),),);}
}

下拉动画效果已经出来了，但是实际情况下，下拉面板的高度是不能直接在组件层固定写死的，所以这里需要动态计算出下拉面板的高度。

七.下拉面板动态高度，支持下拉动画

想要获取组件的高度，需要等到组件的layout完成后，才能获取到组件的大小，因此，我们需要自定义一个RenderObject，重写其performLayout，在子控件第一次layout完后，获取到子控件的初始高度，子控件的初始化高度结合动画的高度比例系数来最终确定自身的大小。

class _RenderHeightFactorBox extends RenderShiftedBox {double _heightFactor;_RenderHeightFactorBox({RenderBox? child,double? heightFactor,}):_heightFactor = heightFactor ?? 1.0, super(child);double get heightFactor => _heightFactor;set heightFactor(double value) {if (_heightFactor == value) {return;}_heightFactor = value;markNeedsLayout();}@overridevoid performLayout() {final BoxConstraints constraints = this.constraints;if (child == null) {size = constraints.constrain(Size.zero);return;}child!.layout(constraints, parentUsesSize: true);size = constraints.constrain(Size(child!.size.width,child!.size.height,));child!.layout(constraints.copyWith(maxWidth: size.width, maxHeight: size.height * heightFactor), parentUsesSize: true);size = constraints.constrain(Size(child!.size.width,child!.size.height,));}
}

接着定义一个SingleChildRenderObjectWidget，并引用_RenderHeightFactorBox

class _HeightFactorBox extends SingleChildRenderObjectWidget {final double? heightFactor;const _HeightFactorBox({super.key,this.heightFactor,super.child,});@overrideRenderObject createRenderObject(BuildContext context) => _RenderHeightFactorBox(heightFactor: heightFactor);@overridevoid updateRenderObject(BuildContext context, _RenderHeightFactorBox renderObject) {renderObject.heightFactor = heightFactor ?? 1.0;}
}

最后把下拉面板中，执行动画的child使用_HeightFactorBox包裹，并传入heightFactorTween的执行结果即可。

@override
Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {EdgeInsets padding = MediaQuery.paddingOf(context);final CurveTween heightFactorTween = CurveTween(curve: const Interval(0.0, 1.0));return MediaQuery.removePadding(context: context,removeTop: true,removeBottom: true,removeLeft: true,removeRight: true,child: CustomSingleChildLayout(delegate: _CustomPopupRouteLayout(position, padding),child: AnimatedBuilder(animation: animation,builder: (context, child) {return Material(child: _HeightFactorBox(heightFactor: heightFactorTween.evaluate(animation),child: child,));},child: Container(color: Colors.yellow,width: double.infinity,height: double.infinity,alignment: AlignmentDirectional.center,child: Text("popup content"),),),),);
}

八.完整代码

class TestPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("下拉菜单"),backgroundColor: Colors.blue,),body: Container(width: 375,child: Column(mainAxisSize: MainAxisSize.max,mainAxisAlignment: MainAxisAlignment.spaceBetween,crossAxisAlignment: CrossAxisAlignment.center,children: [Container(height: 44,margin: const EdgeInsetsDirectional.only(top: 30, start: 30, end: 30),color: Colors.red,child: Builder(builder: (context) {return GestureDetector(onTap: () {showPopup(context: context, builder: (context) {return Container(height: 400,decoration: const BoxDecoration(color: Colors.yellow),child: SingleChildScrollView(physics: const ClampingScrollPhysics(),child: Column(mainAxisSize: MainAxisSize.max,mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.stretch,children: List<Widget>.generate(29, (index) {int itemIndex = index ~/ 2;if(index.isEven) {return Container(height: 44,alignment: AlignmentDirectional.center,child: Text("item$itemIndex"),);} else {return Container(height: 1,color: Colors.grey,);}}),),),);});},);},),),],),),);}}showPopup({required BuildContext context,required WidgetBuilder builder,double? elevation,Color? shadowColor,Duration animationDuration = const Duration(milliseconds: 200)
}) {final RenderBox button = context.findRenderObject()! as RenderBox;final RenderBox overlay = Navigator.of(context).overlay!.context.findRenderObject()! as RenderBox;Offset offset = Offset(0.0, button.size.height);RelativeRect position = RelativeRect.fromRect(Rect.fromPoints(button.localToGlobal(offset, ancestor: overlay),button.localToGlobal(button.size.bottomRight(Offset.zero) + offset, ancestor: overlay),),Offset.zero & overlay.size,);Navigator.of(context).push(_CustomPopupRoute(position: position,builder: builder,elevation: elevation,shadowColor: shadowColor,animationDuration: animationDuration,barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel));
}class _CustomPopupRoute<T> extends PopupRoute<T> {final WidgetBuilder builder;final RelativeRect position;final double? elevation;final Color? shadowColor;@overridefinal String? barrierLabel;final Duration animationDuration;_CustomPopupRoute({required this.builder,required this.position,required this.barrierLabel,this.elevation,this.shadowColor,Duration? animationDuration}): animationDuration = animationDuration ?? const Duration(milliseconds: 200),super(traversalEdgeBehavior: TraversalEdgeBehavior.closedLoop);@overrideColor? get barrierColor => null;@overridebool get barrierDismissible => true;@overrideDuration get transitionDuration => animationDuration;@overrideWidget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {EdgeInsets padding = MediaQuery.paddingOf(context);final CurveTween heightFactorTween = CurveTween(curve: const Interval(0.0, 1.0));return MediaQuery.removePadding(context: context,removeTop: true,removeBottom: true,removeLeft: true,removeRight: true,child: CustomSingleChildLayout(delegate: _CustomPopupRouteLayout(position, padding),child: AnimatedBuilder(animation: animation,builder: (context, child) {return Material(child: _HeightFactorBox(heightFactor: heightFactorTween.evaluate(animation),child: child,));},child: builder(context),),),);}}class _CustomPopupRouteLayout extends SingleChildLayoutDelegate {final RelativeRect position;EdgeInsets padding;double childHeightMax = 0;_CustomPopupRouteLayout(this.position, this.padding);@overrideBoxConstraints getConstraintsForChild(BoxConstraints constraints) {Size buttonSize = position.toSize(constraints.biggest);double constraintsWidth = buttonSize.width;double constraintsHeight = max(position.top - buttonSize.height - padding.top - kToolbarHeight, constraints.biggest.height - position.top - padding.bottom);return BoxConstraints.loose(Size(constraintsWidth, constraintsHeight));}@overrideOffset getPositionForChild(Size size, Size childSize) {double x = position.left;double y = position.top;final double buttonHeight = size.height - position.top - position.bottom;double constraintsHeight = max(position.top - buttonHeight - padding.top - kToolbarHeight, size.height - position.top - padding.bottom);if(position.top + constraintsHeight > size.height - padding.bottom) {y = position.top - childSize.height - buttonHeight;}return Offset(x, y);}@overridebool shouldRelayout(covariant _CustomPopupRouteLayout oldDelegate) {return position != oldDelegate.position || padding != oldDelegate.padding;}
}class _RenderHeightFactorBox extends RenderShiftedBox {double _heightFactor;_RenderHeightFactorBox({RenderBox? child,double? heightFactor,}):_heightFactor = heightFactor ?? 1.0, super(child);double get heightFactor => _heightFactor;set heightFactor(double value) {if (_heightFactor == value) {return;}_heightFactor = value;markNeedsLayout();}@overridevoid performLayout() {final BoxConstraints constraints = this.constraints;if (child == null) {size = constraints.constrain(Size.zero);return;}child!.layout(constraints, parentUsesSize: true);size = constraints.constrain(Size(child!.size.width,child!.size.height,));child!.layout(constraints.copyWith(maxWidth: size.width, maxHeight: size.height * heightFactor), parentUsesSize: true);size = constraints.constrain(Size(child!.size.width,child!.size.height,));}
}class _HeightFactorBox extends SingleChildRenderObjectWidget {final double? heightFactor;const _HeightFactorBox({super.key,this.heightFactor,super.child,});@overrideRenderObject createRenderObject(BuildContext context) => _RenderHeightFactorBox(heightFactor: heightFactor);@overridevoid updateRenderObject(BuildContext context, _RenderHeightFactorBox renderObject) {renderObject.heightFactor = heightFactor ?? 1.0;}
}

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

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

相关文章

【HTML】HTML基础知识扫盲

【HTML】HTML基础知识扫盲

1、什么是HTML&#xff1f; HTML是超文本标记语言&#xff08;Hyper Text Markup Language&#xff09;是用来描述网页的一种语言 注意&#xff1a; HTML不是编程语言&#xff0c;而是标记语言 HTML文件也可以直接称为网页&#xff0c;浏览器的作用就是读取HTML文件&#xff…
阅读更多...
英码科技成功入选《2023边缘计算产业图谱》两大细分领域

英码科技成功入选《2023边缘计算产业图谱》两大细分领域

近日&#xff0c;业界知名的边缘计算行业研究机构发布了《2023边缘计算产业图谱》&#xff0c;展示了全球边缘计算产业的最新发展态势和前景。在本次发布的图谱中&#xff0c;英码科技作为边缘计算领域的领先者&#xff0c;成功入选边缘计算一体机和智能终端两大细分领域&#…
阅读更多...
【Matlab2016】Matlab中文版的下载、安装、激活（不建议安装过高版本!!）

【Matlab2016】Matlab中文版的下载、安装、激活（不建议安装过高版本!!）

这里写目录标题 首先双击R2016_win64.iso加载镜像文件双击setup.exe开始安装选择使用文件密钥安装填入密钥修改安装路径并记住此路径建议全部勾选等待安装完成 激活复制补丁到matlab路径下 创建快捷方式进入bin目录&#xff0c;找到matlab.exe 安装包 首先双击R2016_win64.iso加…
阅读更多...
优优嗨聚集团：绝味鸭脖市值上升，餐饮业迎来新变革

优优嗨聚集团：绝味鸭脖市值上升，餐饮业迎来新变革

导语&#xff1a;绝味鸭脖作为中国餐饮行业的领军企业&#xff0c;其市值上升不仅体现了企业的市场价值&#xff0c;更对整个餐饮行业产生了深远的影响。本文将探讨绝味鸭脖市值上升对餐饮行业的影响&#xff0c;以及未来餐饮行业的发展趋势。 一、绝味鸭脖市值上升&#xff0c…
阅读更多...
KT6368A蓝牙芯片的4脚也就是蓝牙天线脚对地短路了呢？是不是坏了

KT6368A蓝牙芯片的4脚也就是蓝牙天线脚对地短路了呢？是不是坏了

一、问题简介 KT6368A芯片的4脚&#xff0c;也就是蓝牙天线脚&#xff0c;万用表测量对地短路了呢&#xff1f;是不是芯片坏掉了&#xff0c;能不能重新寄样品给我。 详细说明 首先&#xff0c;芯片没有坏&#xff0c;遇到自己不懂的地方&#xff0c;不要轻易的去怀疑。 而是…
阅读更多...
电子电器架构 —— 车载网关初入门（二）

电子电器架构 —— 车载网关初入门（二）

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 PS：小细节，本文字数5000+，详细描述了网关在车载框架中的具体性能设置。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 没有人关注你。也无需有人关注你。你必须承认自己的价值，你不能站在他…
阅读更多...
OpenLayers实战，OpenLayers解析渲染TopoJson格式区划边界数据和实现鼠标经过高亮显示区划边界和文字

OpenLayers实战，OpenLayers解析渲染TopoJson格式区划边界数据和实现鼠标经过高亮显示区划边界和文字

专栏目录： OpenLayers实战进阶专栏目录 前言 本章使用OpenLayers实现从vue项目中加载assets资源目录中的TopoJson格式数据，解析渲染TopoJson格式行政区划边界数据，并且实现鼠标经过区域高亮显示区划边界和文字的功能。 本章是综合应用，为方便大家理解代码，拆分为简单的…
阅读更多...
Shadingsphere proxy 启动报错 Windows

Shadingsphere proxy 启动报错 Windows

Exception in thread "main" java.lang.NoClassDefFoundError 本来打算在本地电脑测试一下proxy的功能&#xff0c;使用的二进制安装包&#xff0c;没想到怎么都启动不起来&#xff0c;一直报找不到某个类的错误。我还以为是自身的配置有问题&#xff0c;等我copy了…
阅读更多...
链表加法与节点交换:数据结构的基础技能

链表加法与节点交换:数据结构的基础技能

目录 两两交换链表中的节点单链表加一链表加法使用栈实现使用链表反转实现 两两交换链表中的节点 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点…
阅读更多...
AD 过滤器

AD 过滤器

应用场景&#xff1a; 只想选择某一层的内容只选择布线只选择焊盘… 因此&#xff0c;有时候AD选中不了对象&#xff0c;也有可能是过滤器打开过滤掉了。
阅读更多...
C语言KR圣经笔记 2.11条件表达式 2.12优先级和求值顺序

C语言KR圣经笔记 2.11条件表达式 2.12优先级和求值顺序

2.11条件表达式 if (a > b) z a; else z b; 上面的语句计算 a 和 b 中的最大值并存入 z。而使用三元操作符 ? : 的条件表达式&#xff0c;为这个结构及类似结构提供了另一种写法。在如下表达式 expr1 ? expr2 : expr3 中&#xff0c;首先对 expr1 求值。如果值非0 …
阅读更多...
使用示例和应用程序全面了解高效数据管理的Golang MySQL数据库

使用示例和应用程序全面了解高效数据管理的Golang MySQL数据库

Golang&#xff0c;也被称为Go&#xff0c;已经成为构建强大高性能应用程序的首选语言。在处理MySQL数据库时&#xff0c;Golang提供了一系列强大的库&#xff0c;简化了数据库交互并提高了效率。在本文中&#xff0c;我们将深入探讨一些最流行的Golang MySQL数据库库&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023