Flutter 之 PopupMenuButton （七十一）

PopupMenuButton 是一个非常常见的弹出菜单栏。

1. PopupMenuButton

PopupMenuButton 定义

  const PopupMenuButton({
    Key? key,
    required this.itemBuilder,
    this.initialValue,
    this.onSelected,
    this.onCanceled,
    this.tooltip,
    this.elevation,
    this.padding = const EdgeInsets.all(8.0),
    this.child,
    this.icon,
    this.iconSize,
    this.offset = Offset.zero,
    this.enabled = true,
    this.shape,
    this.color,
    this.enableFeedback,
  })

PopupMenuButton属性

PopupMenuButton属性	介绍
itemBuilder	@required 必填项，配置弹出菜单的子控件
initialValue	设置弹出菜单的高亮item
onSelected	点击菜单控件
onCanceled	取消点击菜单控件
tooltip	长按时的小提示
elevation	阴影距离
padding	外边距，默认 EdgeInsets.all(8.0),
child	子控件
icon	图标
iconSize	图标大小
offset	偏移量，默认 Offset.zero,
enabled	是否可点击，默认为 true,
shape	边框设置
color	颜色
captureInheritedThemes	默认为 true,

2. PopupMenuItem

PopupMenuItem 定义

  const PopupMenuItem({
    Key? key,
    this.value,
    this.onTap,
    this.enabled = true,
    this.height = kMinInteractiveDimension,
    this.padding,
    this.textStyle,
    this.mouseCursor,
    required this.child,
  }) 

PopupMenuItem属性

PopupMenuItem属性	介绍
value	点击时带入到PopupMenuButton 选中事件的值
onTap	点击事件
enabled	是否可以点击，默认为 true
height	高度，默认为 kMinInteractiveDimension
padding	内边距
textStyle	字体样式
mouseCursor	鼠标光标
child	子组件

3. PopupMenuButton & PopupMenuItem 实例

class MSPopupMenuButtonDemo1 extends StatelessWidget {
  const MSPopupMenuButtonDemo1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("PopupMenuButtonDemo1"),
        actions: [
          PopupMenuButton(
            itemBuilder: (ctx) {
              return [
                PopupMenuItem(
                  child: Text("地下城与勇士"), // 子组件
                  onTap: () => print("Item Clicked 1"), // Item 点击回调
                  padding: EdgeInsets.all(8), // 内边距
                  value: [
                    "驭剑士",
                    "剑帝",
                    "刃影",
                    "巫女",
                    "精灵骑士",
                    "混沌魔灵",
                    "黑暗武士"
                  ], // value 点击时带入到PopupMenuButton 选中事件的值
                ),
                PopupMenuItem(
                  child: Text("王者荣耀"),
                  onTap: () => print("Item Clicked 2"),
                  padding: EdgeInsets.all(8),
                  value: ["后羿", "王昭君", "老夫子"],
                ),
                PopupMenuItem(
                  child: Text("英雄联盟"),
                  onTap: () => print("Item Clicked 3"),
                  padding: EdgeInsets.all(8),
                  value: ["劫", "提莫", "蛮王", "德玛西亚皇子", "洛克"],
                ),
              ];
            },
            color: Colors.amber, // 背景色
            // icon: Icon(Icons.add), // 不设置时，默认 Icons.menu
            // iconSize: 24, // Icon 大小
            child: Center(
              child: Padding(
                padding: const EdgeInsets.only(right: 10),
                child: Text("游戏"),
              ),
            ), // icon 和 child 不能同时设置，否则报错
            shape: Border.all(width: 1.0, color: Colors.cyan), // 边框
            elevation: 10, // 阴影大小
            offset: Offset(0, 50), // 偏移量 默认(0,0)
            tooltip: "好玩的游戏", // 长按提示
            enabled: true, // 是否可点击 默认ture
            padding: EdgeInsets.all(8), // 内边距
            onCanceled: () => print("Cancel"), // 取消回调
            onSelected: (value) => print("Select $value"), // 选中回调
          ),
        ],
      ),
    );
  }
}

112.gif

参考：https://www.jianshu.com/p/d6363833b167