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

news2025/1/12 23:09:50

背景

最近要使用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.coloradmin.cn/o/945125.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

腾讯云服务器学生怎么买?学生服务器购买指南

腾讯云服务器学生怎么买?学生服务器购买指南

腾讯云服务器学生怎么买?学生服务器购买指南&#xff0c;腾讯云学生服务器优惠活动&#xff1a;轻量应用服务器2核2G学生价30元3个月、58元6个月、112元一年&#xff0c;轻量应用服务器4核8G配置191.1元3个月、352.8元6个月、646.8元一年&#xff0c;CVM云服务器2核4G配置842.…
阅读更多...
什么是光流传感器

什么是光流传感器

传感器 文章目录 传感器前言一、光流传感器二、px4FLOW 前言 光流利用的是图像的变化处理&#xff0c;用于检测地面的状态&#xff0c;从而监测飞机的移动&#xff1b;主要用于保持飞机的水平位置&#xff0c;以及在室内实现定高和定点飞行。 其实光流是数字图像处理理论的一部…
阅读更多...
学乐多光屏学习机：教育智能硬件领域的前沿力量

学乐多光屏学习机：教育智能硬件领域的前沿力量

在当今数字化时代&#xff0c;教育方式正经历着巨大的变革&#xff0c;智能硬件为教育领域带来了前所未有的机遇和挑战。学乐多光屏学习机作为一款创新的教育智能硬件产品&#xff0c;以其独特的特点和优势&#xff0c;引领着学习机领域的发展潮流。 1. 多功能融合&#xff1a…
阅读更多...
使用MATLAB解算炼油厂的选址

使用MATLAB解算炼油厂的选址

背景 记得有一年的数据建模大赛&#xff0c;试题是炼油厂的选址&#xff0c;最后我们采用MATLAB编写&#xff08;复制&#xff09;蒙特卡洛算法&#xff0c;还到了省级一等奖&#xff0c;这里把仅有一些记忆和材料&#xff0c;放到这里来&#xff0c;用来纪念消失的青春。 本…
阅读更多...
Creo结构设计-弧形实体绘制/两个实体的圆滑连接-轨迹扫描

Creo结构设计-弧形实体绘制/两个实体的圆滑连接-轨迹扫描

实际需求&#xff1a; 在很多场景需要建模不同弧度的实体对象&#xff0c;常见的依据横截面进行拉伸操作无法很好的完成&#xff0c;有什么样的操作能够方便完成弧形实体建模&#xff1f; 解决方式&#xff1a; 采用轨迹扫描操作完成 举例1&#xff1a;例如两个垂直的圆柱&…
阅读更多...
【OpenCV入门】第一部分——图像处理基础

【OpenCV入门】第一部分——图像处理基础

本文结构 图像处理的基本操作读取图像imread() 显示图像imshow()waitKey()destroyAllWindows() 保存图像imwrite() 获取图像属性 像素确定像素的位置获取像素的BGR值修改像素的BGR值 色彩空间GRAY色彩空间cvtColor()——从BGR色彩空间转换到GRAY色彩空间 HSV色彩空间从BGR色彩空…
阅读更多...
根据逻辑分析仪实际波形，解析IIC通信及可能出现的问题（从机控制时钟SCL）

根据逻辑分析仪实际波形，解析IIC通信及可能出现的问题（从机控制时钟SCL）

1、通信是信息的传递 1.1、信息 信息是多种多样的&#xff0c;在数字电路中&#xff0c;最基本的信息是高低电平&#xff0c;高低电平的提供需要电路转化的&#xff0c;维持高/低是要消耗能量的&#xff0c;信息需要借助能量来存在。 1.2、传递 从发送端传递到接收端需要媒…
阅读更多...
【复杂网络建模】——ER网络和SF网络的阈值分析

【复杂网络建模】——ER网络和SF网络的阈值分析

目录 1、介绍ER网络和SF网络 2、计算网络阈值 2.1 ER&#xff08;Erdős-Rnyi&#xff09;网络 2.2 SF&#xff08;Scale-Free&#xff09;网络 3、 研究网络阈值的意义 1、介绍ER网络和SF网络 在复杂网络理论中&#xff0c;ER网络&#xff08;Erdős-Rnyi网络&#xff…
阅读更多...
C++------map和set的使用

C++------map和set的使用

文章目录 关联式容器键值对树型结构的关联式容器set的介绍map的介绍 关联式容器 什么是关联式容器&#xff1f;它与序列式容器有什么区别&#xff1f; 关联式容器也是用来存储数据的&#xff0c;与序列式容器不同的是&#xff0c;其里面存储的是<key&#xff0c;value>结…
阅读更多...
数据库备份和Shell基础测试及AWK（运维）

数据库备份和Shell基础测试及AWK（运维）

第一题&#xff1a;简述一下如何用mysql命令进行备份和恢复&#xff0c;请以test库为例&#xff0c;创建一个备份&#xff0c;并再用此备份恢复备份 备份步骤&#xff1a; 备份test库&#xff1a;使用mysqldump命令备份test库&#xff0c;并将备份写入一个.sql文件中。命令示例…
阅读更多...
C语言基础之——结构体

C语言基础之——结构体

前言&#xff1a;小伙伴们又见面啦&#xff0c;那么本篇文章&#xff0c;我们就将对C语言基础知识的最后一个章节——结构体展开讲解。 世上无难事&#xff0c;只要肯攀登&#xff01; 目录 一.什么是结构体 二.结构体讲解 1.结构体的声明和变量的定义 2.结构体成员的类型…
阅读更多...
〖Python网络爬虫实战㉞〗- 图形验证码OCR识别

〖Python网络爬虫实战㉞〗- 图形验证码OCR识别

订阅&#xff1a;新手可以订阅我的其他专栏。免费阶段订阅量1000 python项目实战 Python编程基础教程系列&#xff08;零基础小白搬砖逆袭) 说明&#xff1a;本专栏持续更新中&#xff0c;订阅本专栏前必读关于专栏〖Python网络爬虫实战〗转为付费专栏的订阅说明作者&#xff1…
阅读更多...
操作系统_文件管理(三)

操作系统_文件管理(三)

目录 3. 文件系统 3.1 文件系统结构 3.2 文件系统布局 3.2.1 文件系统在磁盘中的结构 3.2.2 文件系统在内存中的结构 3.3 外存空闲空间管理 3.3.1 空闲表法 3.3.2 空闲链表法 3.3.3 位示图法 3.3.4 成组链接法 3.4 虚拟文件系统 3.5 分区和安装 3.6 小结 3. 文件系…
阅读更多...
Javaweb入门

Javaweb入门

Spring Spring发展到今天已经形成一种开发生态圈&#xff0c;Spring提供若干个子项目&#xff0c;每个项目用于完成特定的功能。 Spring Boot可以帮助我们非常快速的构建应用程序、简化开发、提高效率 SpringBootWeb入门 需求&#xff1a;使用Spring Boot开发一个web应用&a…
阅读更多...
不同代码写法的区别

不同代码写法的区别

目录 神经网络中输入在layer中写输入在build中写输入 输出format写法f代替format写法 zip不加*加* 打平Flatten方法reshape方法 数据打包(batch)tensorflowpytorch 神经网络中输入 在layer中写输入 layers.Dense(512, activationrelu, namelayer1,input_shape(784,)),此处784…
阅读更多...
C语言 实现atoi函数

C语言 实现atoi函数

实现类似atoi函数&#xff0c;把字符串“123456”转换成数值123456 函数int atoi(char *str); 使用ubuntu进行多文件编译&#xff08;main.c head.h test.c&#xff09; head.h&#xff08;预处理&#xff09; #ifndef __HEAD_H__ #define __HEAD_H__#include <stdio.…
阅读更多...
freertos之信号量

freertos之信号量

介绍 信号量这个名字很恰当&#xff1a; 信号&#xff1a;起通知作用 量&#xff1a;还可以用来表示资源的数量 当"量"没有限制时&#xff0c;它就是"计数型信号量"(Counting Semaphores) 当"量"只有0、1两个取值时&#xff0c;它就是"二进…
阅读更多...
2023必备AIGC人工智能软件Top 6

2023必备AIGC人工智能软件Top 6

随着人工智能技术的迅猛发展&#xff0c;越来越多的应用程序开始集成AIGC&#xff08;Artificial Intelligence Generated Content&#xff0c;人工智能生成内容&#xff09;功能&#xff0c;为用户提供更高效、更创造性的体验。在本文中&#xff0c;我们将分享6款实用的AIGC软…
阅读更多...
C++ DAY7

C++ DAY7

一、类模板 建立一个通用的类&#xff0c;其类中的类型不确定&#xff0c;用一个虚拟类型替代 template<typename T> 类template ----->表示开始创建模板 typename -->表明后面的符号是数据类型&#xff0c;typename 也可以用class代替 T ----->表示数据类型…
阅读更多...
软件行业25年技术发展史

软件行业25年技术发展史

阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023