第一百六十三回如何在任意位置显示PopupMenu

最新推荐文章于 2023-10-10 18:13:32 发布

talk_8

最新推荐文章于 2023-10-10 18:13:32 发布

阅读量497

点赞数

分类专栏：一起Talk Flutter吧文章标签：移动开发 Flutter开发 PopupMenu PopupMenuButton showMenu

本文链接：https://blog.csdn.net/talk_8/article/details/133385511

版权

一起Talk Flutter吧专栏收录该内容

771 篇文章 19 订阅

订阅专栏

本文介绍了如何在Flutter中使用`showMenu`方法在任意位置显示PopupMenu，通过`context`、`position`参数控制其位置，并给出了计算位置的原理和示例代码。建议将该方法绑定到按钮的`onPress`事件以实现动态弹出。

摘要由CSDN通过智能技术生成

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

概念介绍

我们在上一章回中介绍了PopupMenuButton相关的内容，它主要用在AppBar中的右侧。有看官说：能不能把它移动到其它的位置？答案是不行，该组件虽然提供了相关的属性来移动菜单的位置，但是移动的位置有限。我们只能换作其它的思路来移动它的位置，本章回中将介绍如何在移动PopupMenu，让它显示在任意位置。

使用方法

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

context属性：就是BuildContext类型的变量；
position属性：主要用来控制PopupMenu的位置，它通过一个相对位置的矩形来控制PopupMenu的位置；
item属性：主要用来存放PopupMenu,该属性的用法和上一章回中PopupMenuButton组件的itemBuilder属性完全相同；

在给position属性赋值时比较困难，因为这个位置坐标不好调整，大家在调整时把握一个原则：以一个点的相对坐标为参考点，position中的坐标值都是相对于这个点。我也是经过反复调试并且查看它的源代码后才总结出这个原则，下面是计算位置的源代码：

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,
);

示例代码

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'),
    ),
  ],)