Flutter 弹出菜单演示

PopupMenuButton是Flutter里弹出菜单的控件，该控件一般使用在appbar控件里，从使用习惯来说放在右上角，以树型三点的形式展现，点击后会弹出一个小页面，显示可以点击的菜单选项，比如跳转到其他页面，改变当前屏幕内容的显示等。

下面撸码：

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: '弹出菜单演示',
      home: new MenuHomePage(),
    );
  }
}

/*
首页是带一个根据点击弹出菜单而改变中间文字的可变状态控件
 */
class MenuHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new MenuHomePageState();
  }
}

class MenuHomePageState extends State<MenuHomePage> {
  //首次运行中间文字显示点击效果
  String _bodyText = '点击效果';
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('弹出菜单演示'),
        actions: <Widget>[
          /*
          下面是一个弹出菜单按钮，包含两个属性点击属性和弹出菜单子项的建立
          其中<String>是表示这个弹出菜单的value内容是String类型
           */
          new PopupMenuButton<String>(
              //这是点击弹出菜单的操作，点击对应菜单后，改变屏幕中间文本状态，将点击的菜单值赋予屏幕中间文本
              onSelected: (String value) {
                setState(() {
                  _bodyText = value;
                });
              },
              //这是弹出菜单的建立，包含了两个子项，分别是增加和删除以及他们对应的值
              itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
                    PopupMenuItem(
                      child: new Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          new Text('增加'),
                          new Icon(Icons.add_circle)
                        ],
                      ),
                      value: '这是增加',
                    ),
                    PopupMenuItem(
                      child: new Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          new Text('增加'),
                          new Icon(Icons.remove_circle)
                        ],
                      ),
                      value: '这是删除',
                    )
                  ])
        ],
      ),
      //这是屏幕主体包含一个中央空间，里面是一个文本内容以及字体大小
      body: new Center(
        child: new Text(
          _bodyText,
          style: new TextStyle(fontSize: 20.0),
        ),
      ),
    );
  }
}

运行效果如下：

14080895-d9cee238ebe2b282.png

点击弹出菜单后：

Screenshot_1537966319.png
点击弹出菜单的增加按钮，屏幕中间文本对应改变：
Screenshot_1537965351.png