Flutter PopupMenuButton


简介

一个提供菜单栏弹出对话框的按钮

  • 点击的时候弹出菜单栏对话框，当选择其中一项后会调用 onSelected方法。传递其所选的菜单项的值
  • 可以提供一个child widget或者提供一个icon给它，但是并不能两者都提供
  • 如果什么都没有提供给 PopupMenuButton ，则会根据运行平台创建一个overflow icon

基本用法

PopupMenuButton 通常配合 PopupMenuItem 一起使用

  • enabled 标识当前item是否可点击
  • PopupMenuItem 可以在child中传入带有Icon的widget
  • 可以指定 PopupMenuButton 的 初始值 initialValue

实例演示

import 'package:flutter/material.dart';

class PopupMenuButtonDemo extends StatefulWidget {
  _PopupMenuButtonDemoState createState() => _PopupMenuButtonDemoState();
}

class _PopupMenuButtonDemoState extends State<PopupMenuButtonDemo> {
  final String _simpleValue1 = 'Menu item value one';
  final String _simpleValue2 = 'Menu item value two';
  final String _simpleValue3 = 'Menu item value three';
  String _simpleValue;

  void showMenuSelection(String value) {
    if (<String>[_simpleValue1, _simpleValue2, _simpleValue3].contains(value))
      _simpleValue = value;
       Scaffold.of(context).showSnackBar( SnackBar(
                content:  Text('You selected: $value')));
  }



  @override
  void initState() {
    super.initState();
    _simpleValue = _simpleValue2;
  }



  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          ListTile(
            title: const Text('An item with a context menu button'),
            trailing: PopupMenuButton<String>(
              padding: EdgeInsets.zero,
              onSelected: showMenuSelection,
              itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
                    PopupMenuItem<String>(
                        value: _simpleValue1,
                        child: const Text('Context menu item one')),
                    const PopupMenuItem<String>(
                        enabled: false, child: Text('A disabled menu item')),
                    PopupMenuItem<String>(
                        value: _simpleValue3,
                        child: const Text('Context menu item three')),
                  ],
            ),
          ),
          ListTile(
            title: const Text('An item with a sectioned menu'),
            trailing: PopupMenuButton<String>(
              padding: EdgeInsets.zero,
              onSelected: showMenuSelection,
              itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
                    const PopupMenuItem<String>(
                        value: 'Preview',
                        child: ListTile(
                            leading: Icon(Icons.visibility),
                            title: Text('Preview'))),
                    const PopupMenuItem<String>(
                        value: 'Share',
                        child: ListTile(
                            leading: Icon(Icons.person_add),
                            title: Text('Share'))),
                    const PopupMenuItem<String>(
                        value: 'Get Link',
                        child: ListTile(
                            leading: Icon(Icons.link),
                            title: Text('Get link'))),
                    const PopupMenuDivider(),
                    const PopupMenuItem<String>(
                        value: 'Remove',
                        child: ListTile(
                            leading: Icon(Icons.delete), title: Text('Remove')))
                  ],
            ),
          ),
          PopupMenuButton<String>(
            padding: EdgeInsets.zero,
            initialValue: _simpleValue,
            onSelected: showMenuSelection,
            child: ListTile(
                title: const Text('An item with a simple menu'),
                subtitle: Text(_simpleValue)),
            itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
                  PopupMenuItem<String>(
                      value: _simpleValue1, child: Text(_simpleValue1)),
                  PopupMenuItem<String>(
                      value: _simpleValue2, child: Text(_simpleValue2)),
                  PopupMenuItem<String>(
                      value: _simpleValue3, child: Text(_simpleValue3))
                ],
          ),
          ListTile(
            title: const Text('An item with a sectioned menu'),
            trailing: PopupMenuButton<String>(
              padding: EdgeInsets.zero,
              onSelected: showMenuSelection,
              itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
                const PopupMenuItem<String>(
                  value: 'Preview',
                  child: ListTile(
                    leading: Icon(Icons.visibility),
                    title: Text('Preview')
                  )
                ),
                const PopupMenuItem<String>(
                  value: 'Share',
                  child: ListTile(
                    leading: Icon(Icons.person_add),
                    title: Text('Share')
                  )
                ),
                const PopupMenuItem<String>(
                  value: 'Get Link',
                  child: ListTile(
                    leading: Icon(Icons.link),
                    title: Text('Get link')
                  )
                ),
                const PopupMenuDivider(),
                const PopupMenuItem<String>(
                  value: 'Remove',
                  child: ListTile(
                    leading: Icon(Icons.delete),
                    title: Text('Remove')
                  )
                )
              ]
            )
          ),
        ],
      ),
    );
  }
}