Flutter：自定义组件的上下左右弹出层

背景

最近要使用Flutter实现一个下拉菜单，需求就是，在当前组件下点击，其下方弹出一个菜单选项，如下图所示：

实现起来，貌似没什么障碍，在Flutter中本身就提供了弹出层PopupMenuButton组件和showMenu方法，于是开搞，代码如下：

PopupMenuButton<String>(initialValue: '下拉菜单一',child: const Text("下拉菜单"),itemBuilder: (context) {return <PopupMenuEntry<String>>[const PopupMenuItem<String>(value: '下拉菜单一',child: Text('下拉菜单一'),),const PopupMenuItem<String>(value: '下拉菜单二',child: Text('下拉菜单二'),),const PopupMenuItem<String>(value: '下拉菜单三',child: Text('下拉菜单三'),)];},)

直接使用showMenu也行，代码如下：

 showMenu(context: context,position: const RelativeRect.fromLTRB(0, 0, 0, 0),items: <PopupMenuEntry>[const PopupMenuItem(value: "下拉菜单一",child: Text("下拉菜单一"),),const PopupMenuItem(value: "下拉菜单二",child: Text("下拉菜单二"),),const PopupMenuItem(value: "下拉菜单三",child: Text("下拉菜单三"),),]);

PopupMenuButton运行看结果：

showMenu位置传的是左上角，这个就不贴图了。

看到效果后，我诧异了，这也不符合我的需求啊，直接把选项给我盖住了，这还得了，况且位置也不对啊，怎么搞？还好，无论使用PopupMenuButton还是showMenu，都给我们提供了位置。

PopupMenuButton设置位置：

offset: Offset(dx, dy)

showMenu设置位置：

 position: const RelativeRect.fromLTRB(left, top, right, bottom)

使用位置后，我们再看效果：

dx设置为0，dy设置为50：

PopupMenuButton<String>(initialValue: '下拉菜单一',offset: const Offset(0, 50),itemBuilder: (context) {return <PopupMenuEntry<String>>[const PopupMenuItem<String>(value: '下拉菜单一',child: Text('下拉菜单一'),),const PopupMenuItem<String>(value: '下拉菜单二',child: Text('下拉菜单二'),),const PopupMenuItem<String>(value: '下拉菜单三',child: Text('下拉菜单三'),)];},child: Text("下拉菜单",key: _key,),)

效果如下图：

这样看起来确实好多了，但是我的疑问就来了，如果我想实现在左边展示呢？在上边、右边，甚至左上右上，左下右下呢？通过坐标计算，确实能实现，但是计算起来麻烦，也不精确，很难作为上上策，再者，这种弹窗方式样式，在实际开发中也很难满足我们的需求。

既然原生的组件无法满足我们的需求，怎么搞？只有自定义一个组件了。

今天的内容大致如下：

1、自定义弹出层效果一览

2、弹出层逻辑实现

3、使用注意事项

4、源码

一、自定义弹出层效果一览

目前自定义的组件，可以在目标组件，左、上、右、下，左上、右上，左下、右下八个方向进行精确的弹出，当然了，除此之外，也可以动态的展示到自己想要的位置，并且弹出层效果可以自定义，效果是我弹出了一个黑色矩形，你可以弹出一个列表，一个图片等等。

 

二、弹出层逻辑实现

1、悬浮在其他顶部小部件之上

为了更好的展示弹出效果，和不影响UI层的相关逻辑，针对弹出层，我们可以悬浮在内容层之上，做透明处理即可，这里使用到了Overlay对象，它是一个类似悬浮小弹窗，如Toast，安卓的PopupWindow效果。

相关代码如下，创建OverlayEntry，并插入到Overlay中，这样就可以把OverlayEntry中构建的小部件叠加悬浮在其他顶部小部件之上。

OverlayState overlayState = Overlay.of(key.currentContext!);OverlayEntry _overlayEntry = OverlayEntry();overlayState.insert(_overlayEntry!);

 

2、获取弹出目标组件的左上右下

所谓目标组件，就是，你想要在哪个组件（左上右下）进行弹出，确定了目标组件之后，为了使弹出层，精确的展示在目标组件的方位，需要拿到目标组件的位置，也就是左上右下的位置，这里使用到了GlobalKey作为获取方式，具体的位置信息获取如下：

///获取组件的位置static WidgetSize getWidgetSize(GlobalKey key) {//获取组件的位置，在左上右下final RenderBox renderBox =(key.currentContext?.findRenderObject() as RenderBox);final left = renderBox.localToGlobal(Offset.zero).dx; //左边final top = renderBox.localToGlobal(Offset(renderBox.size.width, 0)).dy;final bottom = renderBox.localToGlobal(Offset(0, renderBox.size.height)).dy;final right = renderBox.localToGlobal(Offset(renderBox.size.width, renderBox.size.height)).dx;return WidgetSize(left, top, right, bottom);}

创建记录位置对象，用来标记左上右下。

///组件对象，标记左上右下
class WidgetSize {double left;double top;double right;double bottom;WidgetSize(this.left, this.top, this.right, this.bottom);
}

3、设置弹出层的位置

弹出层位置，这里利用到了Positioned组件，控制其left和top位置，基本上和PopupMenuButton类似，无非就是自己实现了位置的测量而已。

首先根据传递的属性WindowDirection，确定要设置的方位。

具体各个方位计算如下：

目标组件下边：

top坐标：目标组件的底部坐标+边距

left坐标：目标组件的右部坐标-弹出层的宽度/2-目标组件宽度/2

目标组件左边：

top坐标：目标组件的底部坐标-弹出层的高度/2-目标组件的高度/2

left坐标：目标组件的左边坐标-弹出层的宽度-边距

目标组件上边：

top坐标：目标组件的上边坐标-弹出层的高度-边距

left坐标：目标组件的右部坐标-弹出层的宽度/2-目标组件宽度/2

目标组件右边：

top坐标：目标组件的底部坐标-弹出层的高度/2-目标组件的高度/2

left坐标：目标组件的右边坐标+边距

目标组件左上：

top坐标：目标组件的底部坐标-弹出层的高度-目标组件的高度-边距

left坐标：目标组件的左边坐标-弹出层的宽度-边距

目标组件右上：

top坐标：目标组件的底部坐标-弹出层的高度-目标组件的高度-边距

left坐标：目标组件的左边坐标+边距

目标组件左下：

top坐标：目标组件的底部坐标+边距

left坐标：目标组件的左边坐标-弹出层的宽度-边距

目标组件右下：

top坐标：目标组件+边距

left坐标：目标组件右边的坐标+边距

var size = getWidgetSize(key); //获取在目标组件的位置double widgetTop = 0.0;double widgetLeft = 0.0;switch (direction) {case WindowDirection.bottom: //下面widgetTop = size.bottom + margin;widgetLeft =size.right - childWidth / 2 - ((size.right - size.left) / 2);break;case WindowDirection.left: //左面widgetTop =size.bottom - childHeight / 2 - ((size.bottom - size.top) / 2);widgetLeft = size.left - childWidth - margin;break;case WindowDirection.top: //上面widgetTop = size.top - childHeight - margin;widgetLeft =size.right - childWidth / 2 - ((size.right - size.left) / 2);break;case WindowDirection.right: //右面widgetTop =size.bottom - childHeight / 2 - ((size.bottom - size.top) / 2);widgetLeft = size.right + margin;break;case WindowDirection.topLeft: //左上widgetTop =size.bottom - childHeight - (size.bottom - size.top) - margin;widgetLeft = size.left - childWidth - margin;break;case WindowDirection.topRight: //右上widgetTop =size.bottom - childHeight - (size.bottom - size.top) - margin;widgetLeft = size.right + margin;break;case WindowDirection.bottomLeft: //左下widgetTop = size.bottom + margin;widgetLeft = size.left - childWidth - margin;break;case WindowDirection.bottomRight: //右下widgetTop = size.bottom + margin;widgetLeft = size.right + margin;break;case WindowDirection.none: //取消 自己测量位置widgetTop = top;widgetLeft = left;break;}

三、使用注意事项

1、为了能够精确的设置弹出层的位置，其弹出层的宽度和高度是必须要传递的，也就是childWidth和childHeight属性。

2、如果想自己设置位置，可以不传childWidth和childHeight，设置direction为WindowDirection.none，并且left和top坐标需要传递。

3、margin属性设置弹出层距离目标组件的距离。

四、源码

源码地址

https://github.com/AbnerMing888/flutter_widget/blob/master/lib/utils/popup_window.dart

使用方式

PopupWindow.create(_key,const BaseWidget(width: 100,height: 100,backgroundColor: Colors.black,),direction: direction,margin: 10,childWidth: 100,childHeight: 100);

参数介绍

属性

类型

概述

key

GlobalKey

目标组件的key

child

Widget

弹出层

childWidth

double

弹出层的宽

childHeight

double

弹出层的高

direction

WindowDirection

位置：

left//左

top//上

right//右

bottom//下

topLeft, //左上角

topRight, //右上角

bottomLeft, //左下

bottomRight, //右下

none//取消位置，自己定义

left

double

相对于屏幕的左侧坐标

top

double

相对于屏幕的顶部坐标

margin

double

弹出层距离目标组件的距离

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

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

相关文章

1761. 一个图中连通三元组的最小度数

1761. 一个图中连通三元组的最小度数

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;无向图暴力枚举方法二&#xff1a;给无向图定向 写在最后 Tag 【暴力枚举】【度数】【有向图】【无向图】 题目来源 1761. 一个图中连通三元组的最小度数 题目解读 现在有一个无向图&#xff0c;找出连通三元组中度…
阅读更多...
【请求报错：javax.net.ssl.SSLHandshakeException: No appropriate protocol】

【请求报错：javax.net.ssl.SSLHandshakeException: No appropriate protocol】

1、问题描述 在请求服务时报错说SSL握手异常协议禁用啥的&#xff0c;而且我的连接数据库的url也加了useSSLfalse javax.net.ssl.SSLHandshakeException: No appropriate protocol (protocol is disabled or cipher suites are inappropriate)2、解决方法 在网上查找了方法…
阅读更多...
mate60 里的2035 到底是什么鬼？

mate60 里的2035 到底是什么鬼？

华为在 lengbulangqiang 的情况下发布了 mate60 手机&#xff0c;犹如一颗核弹升到了各国的上空&#xff0c;每个人都很想知道这其中发生了什么事情&#xff0c;也是疑点重重&#xff0c;这其中的一些疑点&#xff0c;足以让某些人暴跳如雷。 这 2035 标识到底是什么&#xff1…
阅读更多...
弹性盒子的使用

弹性盒子的使用

一、定义 弹性盒子是一种用于按照布局元素的一维布局方法&#xff0c;它可以简便、完整、响应式地实现各种页面布局。 容器中存在两条轴&#xff0c;主轴和交叉轴(相当于我们坐标轴的x轴和y轴)。我们可以通过flex-direction来决定主轴的方向。 主轴&#xff08;main axis&am…
阅读更多...
SpringCloudAlibaba Gateway(三)-整合Sentinel功能路由维度、API维度进行流控

SpringCloudAlibaba Gateway(三)-整合Sentinel功能路由维度、API维度进行流控

Gateway整合Sentinel ​ 前面使用过Sentinel组件对服务提供者、服务消费者进行流控、限流等操作。除此之外&#xff0c;Sentinel还支持对Gateway、Zuul等主流网关进行限流。 ​ 自sentinel1.6.0版开始&#xff0c;Sentinel提供了Gateway的适配模块&#xff0c;能针对路由(rou…
阅读更多...
Leetcode1090. 受标签影响的最大值

Leetcode1090. 受标签影响的最大值

思路&#xff1a;根据值从大到小排序&#xff0c;然后在加的时候判断是否达到标签上限即可&#xff0c;一开始想用字典做&#xff0c;但是题目说是集合却连续出现两个8&#xff0c;因此使用元组SortedList进行解决 class Solution:def largestValsFromLabels(self, values: li…
阅读更多...
MIPI D-PHY的初始化（MIPI Alliance Xilinx）

MIPI D-PHY的初始化（MIPI Alliance Xilinx）

DPHY的基本介绍及使用已有很多文章&#xff0c;基本是基于《MIPI Alliance Specification for D-PHY 》的内容&#xff0c;学习时也以此为准&#xff0c;可参考CSDN上的文章。着重讲述MIPI D-PHY的初始化部分 1 D-PHY的功能及使用 下面的文章讲的不错&#xff0c;既有理论&…
阅读更多...
基于Matlab实现生活中的图像信号分类（附上源码+数据集）

基于Matlab实现生活中的图像信号分类（附上源码+数据集）

在我们的日常生活中&#xff0c;我们经常会遇到各种各样的图像信号&#xff0c;例如照片、视频、图标等等。对这些图像信号进行分类和识别对于我们来说是非常有用的。在本文中&#xff0c;我将介绍如何使用Matlab来实现生活中的图像信号分类。 文章目录 介绍源码数据集下载 介…
阅读更多...
Hive-安装与配置（1）

Hive-安装与配置（1）

&#x1f947;&#x1f947;【大数据学习记录篇】-持续更新中~&#x1f947;&#x1f947; 个人主页&#xff1a;beixi 本文章收录于专栏&#xff08;点击传送&#xff09;&#xff1a;【大数据学习】 &#x1f493;&#x1f493;持续更新中&#xff0c;感谢各位前辈朋友们支持…
阅读更多...
dockerfile 例子（二）

dockerfile 例子（二）

Dockerfile由一行一行的命令语句组成&#xff0c;#开头的为注释行。Dockerfile文件内容分为四个部分&#xff1a;基础镜像信息、维护者信息、镜像操作指令以及容器启动执行指令。 接下来给大家列出Dockerfile中主要命令的说明。 FROM&#xff0c;指定所创建镜像的基础镜像。 …
阅读更多...
网站IP流量与来路逆向营销

网站IP流量与来路逆向营销

直接刷主流统计平台任意来路IP&#xff0c;另类思路让客户主动找上门 一般的站长或者网站拥有者都会在自己网站添加统计系统以分析监控用户访问&#xff0c;而其中用户关注最多的是关键词和来路&#xff0c;这样如果我们能在统计来路里把我们自己网站推送给跟我们业务相关的网站…
阅读更多...
【笔记】常用 js 函数

【笔记】常用 js 函数

数组去重 Array.from(new Set()) 对象合并 Object.assign . 这里有个细节&#xff1a;当两个对象中含有key相同value不同时&#xff0c;会以 后面对象的key&#xff1a;value为准 保留小数点后几位 toFixed 注意&#xff1a; Number型&#xff0c;用该方法处理完&#xff0c;会…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023