第二百三十五回

文章目录

我们在上一章回中介绍了PopupMenuButton相关的内容,本章回中将介绍如何在任意位置显示PopupMenu.闲话休提,让我们一起Talk Flutter吧。

概念介绍

我们在上一章回中介绍了PopupMenuButton相关的内容,它主要用在AppBar中的右侧。有看官说:能不能把它移动到其它的位置?答案是不行,该组件虽然提供了相关

的属性来移动菜单的位置,但是移动的位置有限。我们只能换作其它的思路来移动它的位置,本章回中将介绍如何在移动PopupMenu,让它显示在任意位置。

使用方法

我们可以使用showMenu方法来移动PopupMenu.该方法提供了相关的参数来控制PopupMenu,详细的参数如下:

  • context属性:就是BuildContext类型的变量;
  • position属性:主要用来控制PopupMenu的位置,它通过一个相对位置的矩形来控制PopupMenu的位置;
  • item属性:主要用来存放PopupMenu,该属性的用法和上一章回中PopupMenuButton组件的itemBuilder属性完全相同;
    在给position属性赋值时比较困难,因为这个位置坐标不好调整,大家在调整时把握一个原则:以一个点的相对坐标为参考点,position中的坐标值都是相对于这个
    点。我也是经过反复调试并且查看它的源代码后才总结出这个原则,下面是计算位置的源代码:
dart 复制代码
final 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,
);

示例代码

dart 复制代码
showMenu(
  context:context,
 ///这个坐标值不好调整,下面我的经验值,位置在手指点击点的左下方,想往左移动给110+数字 往下移动180加数字
  position: const RelativeRect.fromLTRB(170, 180, 110, 10),
  items: [
    ///建议指定value属性
    PopupMenuItem<String>(
      value: 'one',
      onTap: ()=> debugPrint('tap one'),
      child: const Text('1'),
    ),
    PopupMenuItem<String>(
      value:'two',
      onTap: ()=> debugPrint('tap two'),
      child: const Text('2'),
    ),
    PopupMenuItem<String>(
      value:'three',
      onTap: ()=> debugPrint('tap three'),
      child: const Text('3'),
    ),
  ],)

上面的示例代码中添加了包含三个选项的PopupMenu,在PopupMenu弹出时可以看到。此外,我建议把这个方法赋值给按钮类组件的onPress属性,这样在点击按钮时

就会弹出PopupMenu.而且它的位置是相对按钮进行偏移的。比如我在上面代码中的位置就是一个经验值,按照这个值设置后,弹出的PopupMenu位于按钮的左下方。

我在这里就不演示程序的运行结果了,建议大家自己动手去实践,这样可以体会到位置变化的细节。

看官们,与"如何在任意位置显示PopupMenu"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

相关推荐
理想不理想v10 分钟前
vue经典前端面试题
前端·javascript·vue.js
不收藏找不到我11 分钟前
浏览器交互事件汇总
前端·交互
YBN娜24 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=24 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck29 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!1 小时前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。1 小时前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼1 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09331 小时前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端