Flutter如何实现菜单弹出框PopupMenuButton功能
这篇文章将为大家详细讲解有关Flutter如何实现菜单弹出框PopupMenuButton功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
相信在实际开发过程当中,肯定少不了这样的功能:
点击 AppBar 右上角的按钮,弹出一个菜单供用户选择。
幸运的是,Flutter 提供给我们了一个 Widget
,直接就能实现如上的效果。
PopupMenuButton
还是老规矩,先看官方的说明:
Displays a menu when pressed and calls onSelected [1] when the menu is dismissed because an item was selected. The value passed to onSelected [2] is the value of the selected menu item.
One of child [3] or icon [4] may be provided, but not both. If icon [5] is provided, then PopupMenuButton [6] behaves like an IconButton [7] .
If both are null, then a standard overflow icon is created (depending on the platform).
大致意思为:
当按下的时候显示一个菜单,选择了一个项目的时候会回调 onSelected ,传递的值是所选菜单的值。
可以提供 child or icon ,但是不能同时提供。
如果为空,则提供一个默认的图标,取决于平台。
构造函数
看完了官方说明,再来看构造函数:
constPopupMenuButton({ Keykey, @requiredthis.itemBuilder, this.initialValue, this.onSelected, this.onCanceled, this.tooltip, this.elevation=8.0, this.padding=constEdgeInsets.all(8.0), this.child, this.icon, this.offset=Offset.zero, this.enabled=true, }):assert(itemBuilder!=null), assert(offset!=null), assert(enabled!=null), assert(!(child!=null&&icon!=null)),//failsifpassedbothparameters super(key:key);
这里面每一个参数应该都很好理解,就不做过多的解释了,
唯一必传的参数就是 itemBuilder
,也可以看到后面的断言:
assert(!(child != null && icon != null))
判断了 child 、icon 是否同时不为空,如果是的话就报错了。
简单 Demo
构造函数理解了,官方也提供了一个 Demo,我们来看一下运行效果:
再来看一下代码:
///首先定义了一个枚举 enumWhyFarther{ harder, smarter, selfStarter, tradingCharter, } ///------------------------------------ ///build方法 Widgetbuild(BuildContextcontext){ returnScaffold( appBar:AppBar( title:Text('PopupMenuButtonPage'), actions:[ PopupMenuButton ( onSelected:(WhyFartherresult){ setState((){ _selection=result; }); }, icon:Icon(Icons.more_vert), itemBuilder:(BuildContextcontext)=> >[ constPopupMenuItem ( value:WhyFarther.harder, child:Text('Workingalotharder'), ), constPopupMenuItem ( value:WhyFarther.smarter, child:Text('Beingalotsmarter'), ), constPopupMenuItem ( value:WhyFarther.selfStarter, child:Text('Beingaself-starter'), ), constPopupMenuItem ( value:WhyFarther.tradingCharter, child:Text('Placedinchargeoftradingcharter'), ), ], ), ], ), body:Container(), ); }
解释一下逻辑:
1. 首先定义了一个枚举
2. 然后在 AppBar 的「actions」里定义了 PopupMenuButton
3. 设置 icon 为 Icon(Icons.more_vert)
4. itemBuilder 需返回一个 List
5. 这里传入的值就是 PopupMenuItem
6. 然后定义 onSelected 参数接收点击回调
这样整体的逻辑就是定义好了,运行一下:
关于“Flutter如何实现菜单弹出框PopupMenuButton功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
推荐阅读
-
flutter怎么封装点击菜单工具栏组件checkBox多选版
flutter怎么封装点击菜单工具栏组件checkBox多选版这篇...
-
flutter怎么封装单选点击菜单工具栏组件
flutter怎么封装单选点击菜单工具栏组件这篇“flutter怎...
-
Android与Flutter之间如何实现通信
Android与Flutter之间如何实现通信这篇“Android...
-
怎么在Flutter中获取设备标识符
怎么在Flutter中获取设备标识符这篇文章主要介绍了怎么在Flu...
-
Flutter怎么使用AnimatedBuilder实现动效复用
Flutter怎么使用AnimatedBuilder实现动效复用这...
-
Flutter怎么使用RepositoryProvider解决跨组件传值问题
Flutter怎么使用RepositoryProvider解决跨组件传值问题...
-
Flutter如何实现文本滚动高亮效果
Flutter如何实现文本滚动高亮效果这篇文章主要介绍“Flutt...
-
怎么用web3dart为flutter应用生成以太坊地址
怎么用web3dart为flutter应用生成以太坊地址本篇内容介...
-
Flutter多平台适配机制的示例分析
-
flutter是什么