Flutter入门（24）：Flutter 组件之 PopupMenuButton 详解

1. 基本介绍

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

2. 示例代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. 属性介绍

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

4. PopupMenuButton 组件

4.1 创建容器

优雅的编程，首先创建一个 popupmenubutton.dart 文件。

import 'package:flutter/material.dart';

class FMPopupMenuButtonVC extends StatefulWidget{
  @override
  FMPopupMenuButtonState createState() => FMPopupMenuButtonState();
}

class FMPopupMenuButtonState extends State  {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("IconButton"),
        actions: [_popupMenuButton(context)],
      ),
    );
  }

  PopupMenuButton _popupMenuButton(BuildContext context){
    return PopupMenuButton(
      itemBuilder: (BuildContext context){
        return [
          PopupMenuItem(child: Text("DOTA"),value: "dota",),
          PopupMenuItem(child: Text("英雄联盟"),value: ["盖伦", "皇子", "提莫"],),
          PopupMenuItem(child: Text("王者荣耀"),value: {"name":"王者荣耀"},),
        ];
      },
    );
  }
}

PMB normal.gif

4.2 点击事件及传值

PopupMenuItem.value 可以传任意属性值，效果如下。

  PopupMenuButton _popupMenuButton(BuildContext context){
    return PopupMenuButton(
      itemBuilder: (BuildContext context){
        return [
          PopupMenuItem(child: Text("DOTA"),value: "dota",),
          PopupMenuItem(child: Text("英雄联盟"),value: ["盖伦", "皇子", "提莫"],),
          PopupMenuItem(child: Text("王者荣耀"),value: {"name":"王者荣耀"},),
        ];
      },
      onSelected: (Object object){
        print(object);
      },
      onCanceled: (){
        print("canceled");
      },
    );
  }

PMB pressed.gif

4.3 颜色、图标、子控件

  PopupMenuButton _popupMenuButton(BuildContext context){
    return PopupMenuButton(
      itemBuilder: (BuildContext context){
        return [
          PopupMenuItem(child: Text("DOTA"),value: "dota",),
          PopupMenuItem(child: Text("英雄联盟"),value: ["盖伦", "皇子", "提莫"],),
          PopupMenuItem(child: Text("王者荣耀"),value: {"name":"王者荣耀"},),
        ];
      },
      color: Colors.yellow,
      // icon: Icon(Icons.add),
      child: Center(
        child: Text("游戏"),
      ),
    );
  }

PMB color.png

PMB child.png

PMB icon.png

注意 icon 与 child 属性不能同时设置，否则会如下报错。

You can only pass [child] or [icon], not both.
'package:flutter/src/material/popup_menu.dart':
Failed assertion: line 977 pos 15: '!(child != null && icon != null)'

4.4 边框形状

使用 shape 属性来给弹出菜单设置边框。

  PopupMenuButton _popupMenuButton(BuildContext context){
    return PopupMenuButton(
      itemBuilder: (BuildContext context){
        return [
          PopupMenuItem(child: Text("DOTA"),value: "dota",),
          PopupMenuItem(child: Text("英雄联盟"),value: ["盖伦", "皇子", "提莫"],),
          PopupMenuItem(child: Text("王者荣耀"),value: {"name":"王者荣耀"},),
        ];
      },
      onSelected: (Object object){
        print(object);
      },
      onCanceled: (){
        print("canceled");
      },
      color: Colors.yellow,
      icon: Icon(Icons.add),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
        side: BorderSide(
          width: 2,
          color: Colors.red,
          style: BorderStyle.solid,
        ),
      ),
    );
  }

PMB shape.png

5. PopupMenuItem 组件

5.1 属性介绍

PopupMenuItem属性	介绍
value	点击时带入到点击事件的值
enabled	是否可以点击，默认为 true
height	高度，默认为 kMinInteractiveDimension
textStyle	字体样式

5.2 示例

  PopupMenuButton _popupMenuButton(BuildContext context){
    return PopupMenuButton(
      itemBuilder: (BuildContext context){
        return [
          PopupMenuItem(child: Text("DOTA"),value: "dota",height: 100,),
          PopupMenuItem(child: Text("英雄联盟"),value: ["盖伦", "皇子", "提莫"], enabled: false,),
          PopupMenuItem(child: Text("王者荣耀"),value: {"name":"王者荣耀"}, textStyle: TextStyle(color: Colors.red),),
        ];
      },
      onSelected: (Object object){
        print(object);
      },
      onCanceled: (){
        print("canceled");
      },
      initialValue: 1,
      color: Colors.yellow,
      icon: Icon(Icons.add),
      // child: Center(
      //   child: Text("游戏"),
      // ),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
        side: BorderSide(
          width: 2,
          color: Colors.red,
          style: BorderStyle.solid,
        ),
      ),
    );
  }

FMB item.png

6. 技术小结

• PopupMenuButton 属性较少，都用一下感受一下效果即可。
• PopupMenuItem 属性也比较少，容易掌握。