Flutter 学习（十七）基础 Widget - 菜单按钮

PopupMenuButton 是一个按钮，当你点击按钮的时候，就会弹出类似 Android 选项菜单的框。

PopupMenuButton 的快速上手

PopupMenuButton 是点击后会弹出菜单选项的按钮，其 child 参数是用来显示按钮的内容，itemBuilder 参数是用来显示弹出的菜单，onSelected 参数用于处理菜单点击事件：

PopupMenuButton<MenuItem>(
    child: Text('更多'),
    onSelected: (MenuItem result) {
      print('click '+result.toString());
    },
    itemBuilder: (BuildContext context) => <PopupMenuEntry<MenuItem>>[
      const PopupMenuItem<MenuItem>(
        value: MenuItem.menuA,
        child: Text('menu A'),
      ),
      const PopupMenuItem<MenuItem>(
        value: MenuItem.menuB,
        child: Text('menu B'),
      ),
      const PopupMenuItem<MenuItem>(
        value: MenuItem.menuC,
        child: Text('menu C'),
      ),
      const PopupMenuItem<MenuItem>(
        value: MenuItem.menuD,
        child: Text('menu D'),
      ),
    ],
  )

PopupMenuButton 在一个页面使用的完整 Demo 如下：

import 'package:flutter/material.dart';
void main() => runApp(PopupMenuButtonWidget());
class PopupMenuButtonWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      theme: ThemeData(
        primaryColor: Colors.blue,
      ),
      home: Scaffold(
          appBar: AppBar(title: Text("Flutter UI基础Widget -- 按钮")),
          body: PopupMenuButton<MenuItem>(
            child: Text('更多'),
            onSelected: (MenuItem result) {
              print('click '+result.toString());
            },
            itemBuilder: (BuildContext context) => <PopupMenuEntry<MenuItem>>[
                  const PopupMenuItem<MenuItem>(
                    value: MenuItem.menuA,
                    child: Text('menu A'),
                  ),
                  const PopupMenuItem<MenuItem>(
                    value: MenuItem.menuB,
                    child: Text('menu B'),
                  ),
                  const PopupMenuItem<MenuItem>(
                    value: MenuItem.menuC,
                    child: Text('menu C'),
                  ),
                  const PopupMenuItem<MenuItem>(
                    value: MenuItem.menuD,
                    child: Text('menu D'),
                  ),
                ],
          )),
    );
  }
}
enum MenuItem { menuA, menuB, menuC, menuD }

运行后有一个更多的按钮，点击这个按钮，会展开菜单：

菜单选择

如何知道选中了哪个菜单呢？
在 onSelected 里会返回选中的菜单：

onSelected: (MenuItem result) {
  print('click '+result.toString());
},

PopupMenuButton 的构造函数及参数说明

PopupMenuButton 的构造函数为：

class PopupMenuButton<T> extends StatefulWidget {
  const PopupMenuButton({
    Key key,
    @required this.itemBuilder,
    this.initialValue,
    this.onSelected,
    this.onCanceled,
    this.tooltip,
    this.elevation = 8.0,
    this.padding = const EdgeInsets.all(8.0),
    this.child,
    this.icon,
    this.offset = Offset.zero,
  }) : assert(itemBuilder != null),
       assert(offset != null),
       assert(!(child != null && icon != null)), // fails if passed both parameters
       super(key: key);
    ...   
}

参考

【1】Flutter 实战
【2】Flutter 中文文档
【3】Flutter 完全手册