老孟导读：明天介绍下Flutter中的菜单性能。
PopupMenuButton
应用PopupMenuButton，点击时弹出菜单，用法如下：
PopupMenuButton<String>( itemBuilder: (context) { return <PopupMenuEntry<String>>[ PopupMenuItem<String>( value: '语文', child: Text('语文'), ), PopupMenuItem<String>( value: '数学', child: Text('数学'), ), PopupMenuItem<String>( value: '英语', child: Text('英语'), ), PopupMenuItem<String>( value: '生物', child: Text('生物'), ), PopupMenuItem<String>( value: '化学', child: Text('化学'), ), ]; },)成果如下：
设置其初始值：
PopupMenuButton<String>( initialValue: '语文', ...)设置初始值后，关上菜单后，设置的值将会高亮，成果如下：
获取用户抉择了某一项的值，或者用户未选中，代码如下：
PopupMenuButton<String>( onSelected: (value){ print('$value'); }, onCanceled: (){ print('onCanceled'); }, ...)tooltip是长按时弹出的提醒，用法如下：
PopupMenuButton<String>( tooltip: 'PopupMenuButton', ...)成果如下：
设置其暗影值、内边距和弹出菜单的背景色彩：
PopupMenuButton<String>( elevation: 5, padding: EdgeInsets.all(5), color: Colors.red, ...)默认状况下，PopupMenuButton显示3个小圆点，咱们也能够对齐进行设置，设置文字如下：
PopupMenuButton<String>( child: Text('学科'), ...)child组件将会被InkWell包裹，点击弹出菜单，成果如下：
也能够设置其余图标：
PopupMenuButton<String>( icon: Icon(Icons.add), ...)成果如下：
设置弹出菜单边框：
PopupMenuButton<String>( shape: RoundedRectangleBorder( side: BorderSide( color: Colors.red ), borderRadius: BorderRadius.circular(10) ), ...)成果如下：
menu有一个十分重要的参数Offset，这个参数是管制菜单弹出的地位，通常状况下，菜单在以后按钮上面展现：
PopupMenuButton<String>( offset: Offset(0,100), itemBuilder: (context) { return <PopupMenuEntry<String>>[ PopupMenuItem<String>( value: '语文', child: Text('语文'), ), PopupMenuItem<String>( value: '数学', child: Text('数学'), ), ]; },)PopupMenuButton的每一项都须要是PopupMenuEntry类型，PopupMenuEntry为抽象类，其子类有PopupMenuItem、PopupMenuDivider、CheckedPopupMenuItem。
PopupMenuItem
构造函数为
参数阐明：
- value：当此项选中后，此值将会通过
onSelected返回。 - enabled：此项是否可用。
- height：此项的高度
- textStyle：文本款式
- child：子控件。
用法如下：
PopupMenuButton<String>( onSelected: (value) { print('$value'); }, itemBuilder: (context) { return <PopupMenuEntry<String>>[ PopupMenuItem<String>( value: '语文', enabled: false, child: Text('语文'), ), PopupMenuItem<String>( value: '数学', textStyle: TextStyle(color: Colors.red), child: Text('数学'), ), PopupMenuItem<String>( value: '英语', height: 100, child: Text('英语'), ), ]; },)PopupMenuDivider
PopupMenuDivider是菜单分割线，用法如下：
PopupMenuButton<String>( onSelected: (value) { print('$value'); }, itemBuilder: (context) { return <PopupMenuEntry<String>>[ PopupMenuItem<String>( value: '语文', child: Text('语文'), ), PopupMenuDivider(), PopupMenuItem<String>( value: '数学', child: Text('数学'), ), ]; },)PopupMenuDivider默认高度为16，留神这个高度并不是分割线的高度，而是分割线控件的高度，设置为50代码：
PopupMenuDivider(height: 50,),CheckedPopupMenuItem
CheckedPopupMenuItem是后面带是否选中的控件，实质就是一个ListTile，用法如下：
PopupMenuButton<String>( onSelected: (value) { print('$value'); }, itemBuilder: (context) { return <PopupMenuEntry<String>>[ CheckedPopupMenuItem( value: '语文', checked: true, child: Text('语文'), ), CheckedPopupMenuItem( value: '数学', child: Text('数学'), ), ]; },)showMenu
如果你看下PopupMenuButton的源码会发现，PopupMenuButton也是应用showMenu实现的，用法如下：
showMenu( context: context, position: RelativeRect.fill, items: <PopupMenuEntry>[ PopupMenuItem(child: Text('语文')), PopupMenuDivider(), CheckedPopupMenuItem( child: Text('数学'), checked: true, ), PopupMenuDivider(), PopupMenuItem(child: Text('英语')), ]);position参数示意弹出的地位，成果如下：
属性和PopupMenuButton根本一样，但应用showMenu须要咱们指定地位，所以个别状况下，咱们不会间接应用showMenu，而是应用PopupMenuButton，免去了计算地位的过程。
看下PopupMenuButton是如何计算的，有助于帮忙咱们了解：
final PopupMenuThemeData popupMenuTheme = PopupMenuTheme.of(context); final RenderBox button = context.findRenderObject(); final RenderBox overlay = Overlay.of(context).context.findRenderObject(); final RelativeRect position = RelativeRect.fromRect( Rect.fromPoints( button.localToGlobal(widget.offset, ancestor: overlay), button.localToGlobal(button.size.bottomRight(Offset.zero), ancestor: overlay), ), Offset.zero & overlay.size, ); final List<PopupMenuEntry<T>> items = widget.itemBuilder(context);交换
老孟Flutter博客地址（330个控件用法）：http://laomengit.com
欢送退出Flutter交换群（微信：laomengit）、关注公众号【老孟Flutter】：