第二百九十六回

文章目录

  • [1. 概念介绍](#1. 概念介绍)
  • [2. 基本用法](#2. 基本用法)
  • [3. 补充用法](#3. 补充用法)
  • [4. 内容总结](#4. 内容总结)

我们在上一章回中介绍了"再谈ListView中的分隔线",本章回中将介绍如何如何处理ListView中的事件冲突.闲话休提,让我们一起Talk Flutter吧。

1. 概念介绍

我们在第一百六十三回中介绍了showMenu相关的内容,它主要用来显示移动PopupMenu在页面中的位置。如果大家忘记的话,可以点击这里查看详细的内容。本章回中

将在此基础上补充一些新的使用方法。

2. 基本用法

我们可以使用showMenu方法来移动PopupMenu,移动时主要使用了该方法提供的positon参数,这个内容我们在前面章回中介绍过,这里不再展开详细讨论。我们先看

一下showMenu方法的函数原型,详细如下:

dart 复制代码
Future<T?> showMenu<T>({
  required BuildContext context,
  required RelativeRect position,
  required List<PopupMenuEntry<T>> items,
  T? initialValue,
  double? elevation,
  Color? shadowColor,
  Color? surfaceTintColor,
  String? semanticLabel,
  ShapeBorder? shape,
  Color? color,
  bool useRootNavigator = false,
  BoxConstraints? constraints,
  Clip clipBehavior = Clip.none,
}) {}

从中可以看到它返回的是一个Future对象。因此我们可以像使用Future一样使用它。下面是该方法的基本用法,详细如下:

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

3. 补充用法

我们在上一小节介绍了showMenu的基本用法,下面是该就读的补充用法:

dart 复制代码
showMenu(
  context:context,
  position: const RelativeRect.fromLTRB(170, 180, 110, 10),
  items: [
  ///省略,可以参考上面小节的代码 
  ],)
  .then((value) => null)
  .whenComplete(() => null);

该用法中主要以Future的方式进行运行,我们可以在PopMenu关闭后做一些逻辑任务。比如popMenu关闭后会调用then方法,此时可以在该方法中做一些逻辑业务。当

然了,具体的业务与项目有关,我习惯在popMenu关闭时恢复被popMenu遮挡的页面。

4. 内容总结

最后,我们对本章回中的内容做一个全面总结:

  • 可以单独显示PopMenu,也可以和结合showMenu方法一起使用;
  • 我们可以通过showMenu方法的参数来控制PopMenu的位置;
  • 我们可以像Futrue一样使用showMenu方法;
    看官们,与"谈showMenu的用法"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!
相关推荐
患得患失94931 分钟前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_34 分钟前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路3 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔3 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang3 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔3 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任4 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴4 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔4 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js
德育处主任4 小时前
p5.js 矩形rect绘制教程
前端·数据可视化·canvas