第一百六十三回 如何在任意位置显示PopupMenu
文章目录
- 概念介绍
- 使用方法
- 示例代码
我们在上一章回中介绍了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'),),],)
上面的示例代码中添加了包含三个选项的PopupMenu，在PopupMenu弹出时可以看到。
此外，我建议把这个方法赋值给按钮类组件的onPress属性，这样在点击按钮时就会弹出PopupMenu.而且它的位置是相对按钮进行偏移的。比如我在上面代码中的位置就是一个经验值，按照这个值设置后，弹出的PopupMenu位于按钮的左下方。
我在这里就不演示程序的运行结果了，建议大家自己动手去实践，这样可以体会到位置变化的细节。
看官们，与"如何在任意位置显示PopupMenu"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!