文章目录
- 1. 概念介绍
- 2. 基本用法
- 3. 补充用法
- 4. 内容总结
我们在上一章回中介绍了"再谈ListView中的分隔线",本章回中将介绍showMenu的用法.闲话休提,让我们一起Talk Flutter吧。
1. 概念介绍
我们在第一百六十三回中介绍了showMenu相关的内容,它主要用来显示移动PopupMenu在页面中的位置。如果大家忘记的话,可以点击这里查看详细的内容。本章回中
将在此基础上补充一些新的使用方法。
2. 基本用法
我们可以使用showMenu方法来移动PopupMenu,移动时主要使用了该方法提供的positon参数,这个内容我们在前面章回中介绍过,这里不再展开详细讨论。我们先看
一下showMenu方法的函数原型,详细如下:
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一样使用它。下面是该方法的基本用法,详细如下:
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的基本用法,下面是该方法的补充用法:
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的用法"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!