Flutter 弹出菜单组件

Flutter 弹出菜单组件（PopupMenuButton），PopupMenuButton为弹出菜单按钮，一般放在应用页面的右上角，表示有更多的操作。菜单项使用PopupMenuItem组件。

常用属性参考表格:

接下来我们编写一个视频会议产品中关于会控的菜单。视频会议的会控菜单包括如下内容：

• 添加成员
• 锁定会议
• 修改布局
• 挂断所有

完整的示例代码如下：

import 'package:flutter/material.dart';

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

// 会控菜单项
enum ConferenceItem { AddMember, LockConference, ModifyLayout, TurnoffAll }

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PopupMenuButton组件示例',
      home: Scaffold(
        appBar: AppBar(
          title: Text('PopupMenuButton组件示例'),
        ),
        body: Center(
          child: FlatButton(
              onPressed: () {},
              child: PopupMenuButton<ConferenceItem>(
                onSelected: (ConferenceItem result) {},
                itemBuilder: (BuildContext context) =>      //菜单项构造器
                    <PopupMenuEntry<ConferenceItem>>[
                      const PopupMenuItem<ConferenceItem>( //菜单项
                        value: ConferenceItem.AddMember,
                        child: Text('添加成员'),
                      ),
                      const PopupMenuItem<ConferenceItem>(
                        value: ConferenceItem.LockConference,
                        child: Text('锁定会议'),
                      ),
                      const PopupMenuItem<ConferenceItem>(
                        value: ConferenceItem.ModifyLayout,
                        child: Text('修改布局'),
                      ),
                      const PopupMenuItem<ConferenceItem>(
                        value: ConferenceItem.TurnoffAll,
                        child: Text('挂断所有'),
                      ),
                    ],
              ),
          ),
        ),
        ),
      );
    }
  }

上述示例代码的视图展现大致如图所示：

酷客教程相关文章：

• Flutter 扁平按钮组件
• Flutter 悬停按钮组件
• Flutter 抽屉组件
• Flutter 水平选项卡及视图组件