Flutter学习笔记4:PopupMenu

一 什么是PopupMenu

PopupMenu为弹出式菜单按钮，菜单项使用PopupMenuItem组件。
常用属性：
child:child使用则弹出式菜单使用此组件
showMenu:默认弹出框在右上角，如果需要在其他地方就要用到showMenu通过position定位位置
PopupMenuItem:弹出菜单中条目的基类,为单个 item 的弹出样式，默认为 48px 高,可以自定义。

二 看代码

import 'package:flutter/material.dart';

class App extends StatefulWidget {
  @override
  MainState createState() => MainState();
}

class MainState extends State {
  var _currentIndex = 0;

//  WalletPage walletPage;
//  AppPage appPage;
//  MyPage myPage;
//
//  currentPage() {
//    switch (_currentIndex) {
//      case 0:
//        if (walletPage == null) {
//          walletPage = new WalletPage();
//        }
//        returen walletPage;
//      case 1:
//        if (appPage == null) {
//          appPage = new AppPage();
//        }
//        return appPage;
//      case 2:
//        if (myPage == null) {
//          myPage = new MyPage();
//        }
//        return myPage;
//      default;
//    }
//  }

  _popupMenuItem(String title, {String imagePath, IconData icon}) {
    return PopupMenuItem(
      child: Row(
        children: [
          imagePath != null
              ? Image.asset(
                  imagePath,
                  width: 30.0,
                  height: 30.0,
                )
              : SizedBox(
                  width: 30.0,
                  height: 30.0,
                  child: Icon(
                    icon,
                    color: Colors.white,
                  ),
                ),
          Container(
            padding: const EdgeInsets.only(left: 15.0),
            child: Text(
              title,
              style: TextStyle(color: Colors.white),
            ),
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("钱包"),
        actions: [
//          GestureDetector(
//            onTap: () {
////              Navigator.pushNamed(context, 'search');
//            },
//            child: Icon(
//              Icons.search,
//            ),
//          ),
          Padding(
            padding: const EdgeInsets.only(left: 10.0, right: 20.0),
            child: GestureDetector(
              onTap: () {
                showMenu(
                    context: context,
                    position: RelativeRect.fromLTRB(500.0, 76.0, 10.0, 0.0),
                    items: [
                      _popupMenuItem('扫一扫', icon: Icons.search),
                      _popupMenuItem('添加',
                          imagePath: 'images/icon_menu_group.png'),
                    ]);
              },
              child: Icon(Icons.add),
            ),
          )
        ],
      ),
      bottomNavigationBar: new BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          currentIndex: _currentIndex,
          onTap: ((index) {
            setState(() {
              _currentIndex = index;
            });
          }),
          items: [
            new BottomNavigationBarItem(
                title: new Text(
                  '钱包',
                  style: TextStyle(
                      color: _currentIndex == 0
                          ? Color(0xFF46c01b)
                          : Color(0xff999999)),
                ),
                icon: _currentIndex == 0
                    ? Image.asset(
                        'images/weixin_pressed.png',
                        width: 32.0,
                        height: 28.0,
                      )
                    : Image.asset(
                        'images/weixin_normal.png',
                        width: 32.0,
                        height: 28.0,
                      )),
            new BottomNavigationBarItem(
                title: new Text(
                  '应用',
                  style: TextStyle(
                      color: _currentIndex == 1
                          ? Color(0xFF46c01b)
                          : Color(0xff999999)),
                ),
                icon: _currentIndex == 1
                    ? Image.asset(
                        'images/find_pressed.png',
                        width: 32.0,
                        height: 28.0,
                      )
                    : Image.asset(
                        'images/find_normal.png',
                        width: 32.0,
                        height: 28.0,
                      )),
            new BottomNavigationBarItem(
                title: new Text(
                  '我的',
                  style: TextStyle(
                      color: _currentIndex == 2
                          ? Color(0xFF46c01b)
                          : Color(0xff999999)),
                ),
                icon: _currentIndex == 2
                    ? Image.asset(
                        'images/contact_list_pressed.png',
                        width: 32.0,
                        height: 28.0,
                      )
                    : Image.asset(
                        'images/contact_list_normal.png',
                        width: 32.0,
                        height: 28.0,
                      )),
          ]),
    );
  }
}

三 效果图

image.png