基本属性

  1. const PopupMenuButton({
  2.     Key key,
  3.     @required this.itemBuilder, // 菜单中的每一项
  4.     this.initialValue,  // 选中的项
  5.     this.onSelected,    // 点击的时候触发
  6.     this.onCanceled,    // 取消时候触发
  7.     this.tooltip,       // 提示信息
  8.     this.elevation,
  9.     this.padding = const EdgeInsets.all(8.0),
  10.     this.child,         // 按钮 【字】
  11.     this.icon,          // 
  12.     this.offset = Offset.zero,
  13.     this.enabled = true,
  14.     this.shape,         // 外观
  15.     this.color,         // 菜单背景色
  16.     this.captureInheritedThemes = true,
  17.   }) : assert(itemBuilder != null),
  18.        assert(offset != null),
  19.        assert(enabled != null),
  20.        assert(captureInheritedThemes != null),
  21.        assert(!(child != null && icon != null),
  22.            'You can only pass [child] or [icon], not both.'),
  23.        super(key: key);

基本用法

默认基本样式

  1. String  _initaiaValue = "索隆";
  3. PopupMenuButton(
  4.   itemBuilder: (context){
  5.      return <PopupMenuEntry <String>> [
  6.        PopupMenuItem<String>(
  7.          value: '托尼',  // 查找的内容
  8.          textStyle: TextStyle(color: Colors.yellow[700]), // 设置字体属性
  9.          height: 30.0, // 设置文本高度
  10.          child: Text('乔巴'), // 展示的内容
  11.        ),
  12.        PopupMenuItem<String>(
  13.          value: '索隆',
  14.          child: Text('索隆'), 
  15.        ),
  16.        PopupMenuItem<String>(
  17.          value: '布鲁克',
  18.          child: Text('布鲁克'),
  19.        ),
  20.        PopupMenuItem<String>(
  21.          value: '娜美',
  22.          child: Text('娜美'),
  23.        ),
  24.        PopupMenuItem<String>(
  25.          value: '乌索普',
  26.          child: Text('乌索普'),
  27.        ),
  28.      ];
  29.   },
  30.   initialValue : _initaiaValue, // 默认选择项 是按 value来查找的
  32.   onSelected : (e){ // 点击的时候触发
  33.     setState(() {
  34.       _initaiaValue = e;
  35.     });
  36.       print("this is onSelected and $e");
  37.   },
  39.   onCanceled : (){ // 取消的时候触发。
  40.     print("this is onCanceled!");
  41.   },
  42. )

image.pngimage.png

添加提示信息

  1. PopupMenuButton(
  2.   itemBuilder: (context){
  3.      return <PopupMenuEntry <String>> [
  4.        PopupMenuItem<String>(
  5.          value: '托尼',  // 查找的内容
  6.          textStyle: TextStyle(color: Colors.yellow[700]), // 设置字体属性
  7.          height: 30.0, // 设置文本高度
  8.          child: Text('乔巴'), // 展示的内容
  9.        ),
  10.        PopupMenuItem<String>(
  11.          value: '索隆',
  12.          child: Text('索隆'), 
  13.        ),
  14.        PopupMenuItem<String>(
  15.          value: '布鲁克',
  16.          child: Text('布鲁克'),
  17.        ),
  18.        PopupMenuItem<String>(
  19.          value: '娜美',
  20.          child: Text('娜美'),
  21.        ),
  22.        PopupMenuItem<String>(
  23.          value: '乌索普',
  24.          child: Text('乌索普'),
  25.        ),
  26.      ];
  27.   },
  28.   initialValue : _initaiaValue, // 默认选择项 是按 value来查找的
  30.   onSelected : (e){ // 点击的时候触发
  31.     setState(() {
  32.       _initaiaValue = e;
  33.     });
  34.       print("this is onSelected and $e");
  35.   },
  37.   onCanceled : (){ // 取消的时候触发。
  38.     print("this is onCanceled!");
  39.   },
  41.   tooltip : "按着我不动？想？？", // 提示信息。
  42. )

image.png

更换默认【 … 】菜单图标

  1. PopupMenuButton(
  2.   itemBuilder: (context){
  3.      return <PopupMenuEntry <String>> [
  4.        PopupMenuItem<String>(
  5.          value: '托尼',  // 查找的内容
  6.          textStyle: TextStyle(color: Colors.yellow[700]), // 设置字体属性
  7.          height: 30.0, // 设置文本高度
  8.          child: Text('乔巴'), // 展示的内容
  9.        ),
  10.        PopupMenuItem<String>(
  11.          value: '索隆',
  12.          child: Text('索隆'), 
  13.        ),
  14.        PopupMenuItem<String>(
  15.          value: '布鲁克',
  16.          child: Text('布鲁克'),
  17.        ),
  18.        PopupMenuItem<String>(
  19.          value: '娜美',
  20.          child: Text('娜美'),
  21.        ),
  22.        PopupMenuItem<String>(
  23.          value: '乌索普',
  24.          child: Text('乌索普'),
  25.        ),
  26.      ];
  27.   },
  28.   initialValue : _initaiaValue, // 默认选择项 是按 value来查找的
  30.   onSelected : (e){ // 点击的时候触发
  31.     setState(() {
  32.       _initaiaValue = e;
  33.     });
  34.       print("this is onSelected and $e");
  35.   },
  37.   onCanceled : (){ // 取消的时候触发。
  38.     print("this is onCanceled!");
  39.   },
  41.   tooltip : "aaa", // 提示信息。
  43.   elevation: 50.0,
  45.   icon :  Icon(
  46.     IconData(
  47.       0xe660,
  48.       fontFamily : 'wz',
  49.       matchTextDirection: true,
  50.     ),
  51.     size: 44.0,
  52.   ),
  54. )

image.png

设置外观

  1. PopupMenuButton(
  2.   itemBuilder: (context){
  3.      return <PopupMenuEntry <String>> [
  4.        PopupMenuItem<String>(
  5.          value: '托尼',  // 查找的内容
  6.          textStyle: TextStyle(color: Colors.yellow[700]), // 设置字体属性
  7.          height: 30.0, // 设置文本高度
  8.          child: Text('乔巴'), // 展示的内容
  9.        ),
  10.        PopupMenuItem<String>(
  11.          value: '索隆',
  12.          child: Text('索隆'), 
  13.        ),
  14.        PopupMenuItem<String>(
  15.          value: '布鲁克',
  16.          child: Text('布鲁克'),
  17.        ),
  18.        PopupMenuItem<String>(
  19.          value: '娜美',
  20.          child: Text('娜美'),
  21.        ),
  22.        PopupMenuItem<String>(
  23.          value: '乌索普',
  24.          child: Text('乌索普'),
  25.        ),
  26.      ];
  27.   },
  28.   initialValue : _initaiaValue, // 默认选择项 是按 value来查找的
  30.   onSelected : (e){ // 点击的时候触发
  31.     setState(() {
  32.       _initaiaValue = e;
  33.     });
  34.       print("this is onSelected and $e");
  35.   },
  37.   onCanceled : (){ // 取消的时候触发。
  38.     print("this is onCanceled!");
  39.   },
  41.   tooltip : "aaa", // 提示信息。
  43.   elevation: 50.0,
  45.   icon :  Icon(
  46.     IconData(
  47.       0xe660,
  48.       fontFamily : 'wz',
  49.       matchTextDirection: true,
  50.     ),
  51.     size: 44.0,
  52.   ),
  54.   shape:  OutlineInputBorder( // 外观
  55.     borderSide: BorderSide(color: Colors.yellow[700]),
  56.     borderRadius: BorderRadius.circular(10),
  57.   ),
  59.   color: Colors.green[100], // 列表的背景色
  60.   // child: Text(""),
  61. )

image.png

设置背景色

  1. PopupMenuButton(
  2.   itemBuilder: (context){
  3.      return <PopupMenuEntry <String>> [
  4.        PopupMenuItem<String>(
  5.          value: '托尼',  // 查找的内容
  6.          textStyle: TextStyle(color: Colors.yellow[700]), // 设置字体属性
  7.          height: 30.0, // 设置文本高度
  8.          child: Text('乔巴'), // 展示的内容
  9.        ),
  10.        PopupMenuItem<String>(
  11.          value: '索隆',
  12.          child: Text('索隆'), 
  13.        ),
  14.        PopupMenuItem<String>(
  15.          value: '布鲁克',
  16.          child: Text('布鲁克'),
  17.        ),
  18.        PopupMenuItem<String>(
  19.          value: '娜美',
  20.          child: Text('娜美'),
  21.        ),
  22.        PopupMenuItem<String>(
  23.          value: '乌索普',
  24.          child: Text('乌索普'),
  25.        ),
  26.      ];
  27.   },
  28.   initialValue : _initaiaValue, // 默认选择项 是按 value来查找的
  30.   onSelected : (e){ // 点击的时候触发
  31.     setState(() {
  32.       _initaiaValue = e;
  33.     });
  34.       print("this is onSelected and $e");
  35.   },
  37.   onCanceled : (){ // 取消的时候触发。
  38.     print("this is onCanceled!");
  39.   },
  41.   tooltip : "aaa", // 提示信息。
  43.   elevation: 50.0,
  45.   icon :  Icon(
  46.     IconData(
  47.       0xe660,
  48.       fontFamily : 'wz',
  49.       matchTextDirection: true,
  50.     ),
  51.     size: 44.0,
  52.   ),
  54.   shape:  OutlineInputBorder( // 外观
  55.     borderSide: BorderSide(color: Colors.yellow[700]),
  56.     borderRadius: BorderRadius.circular(10),
  57.   ),
  59.   color: Colors.green[100], // 列表的背景色
  60.   // child: Text(""),
  61. )

image.png