Flutter弹出菜单插件flutter_popup_menu

Flutter弹出菜单插件flutter_popup_menu_button的使用

FlutterPopupMenuButton 是一个用于自定义弹出菜单按钮的小部件。

特性

FlutterPopupMenuButton 提供了一个完全可定制的弹出菜单按钮。在该插件中，您可以控制几乎所有的事情，比如菜单的位置、在X轴和Y轴上的偏移量以及给定菜单的固定高度。它有一个 MenuDirection 枚举来设置您的菜单方向。

enum MenuDirection {
  left,
  right,
  top,
  bottom,
  center,
  none
}

您甚至可以使用 CustomPainter 类绘制自定义形状的菜单，并将画师提供给 FlutterPopupMenuButton 小部件的名为 customPainter 的参数。

开始使用

只需在 pubspec.yaml 文件中添加依赖项，即可开始使用该插件。

dependencies:
  flutter:
    sdk: flutter

  flutter_popup_menu_button:

以下是一个完整的示例代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: Scaffold(
          body: Align(
            alignment: Alignment.topLeft,
            child: FlutterPopupMenuButton(
              direction: MenuDirection.right, // 设置菜单方向为右侧
              decoration: const BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(20)), // 设置圆角
                color: Colors.white, // 设置背景颜色
              ),
              popupMenuSize: const Size(160, 200), // 设置弹出菜单的大小
              child: FlutterPopupMenuIcon(
                key: GlobalKey(), // 给图标添加一个全局键
                child: Icon(Icons.more_vert), // 设置触发弹出菜单的图标
              ),
              children: [
                FlutterPopupMenuItem(
                  closeOnItemClick: false, // 点击不关闭菜单
                  child: ListTile(
                    title: const Text('List 1'), // 菜单项1的标题
                    leading: Container(
                      height: 20,
                      width: 20,
                      decoration: BoxDecoration(
                        color: Colors.redAccent.withOpacity(0.3),
                        shape: BoxShape.circle,
                      ),
                    ),
                  ),
                ),
                FlutterPopupMenuItem(
                  closeOnItemClick: false, // 点击不关闭菜单
                  child: ListTile(
                    title: const Text('List 2'), // 菜单项2的标题
                    leading: Container(
                      height: 20,
                      width: 20,
                      decoration: BoxDecoration(
                        color: Colors.green.withOpacity(0.3),
                        shape: BoxShape.circle,
                      ),
                    ),
                  ),
                ),
                FlutterPopupMenuItem(
                  child: ListTile(
                    title: const Text('List 3'), // 菜单项3的标题
                    leading: Container(
                      height: 20,
                      width: 20,
                      decoration: BoxDecoration(
                        color: Colors.blue.withOpacity(0.3),
                        shape: BoxShape.circle,
                      ),
                    ),
                  ),
                ),
                FlutterPopupMenuItem(
                  child: ListTile(
                    title: const Text('List 4'), // 菜单项4的标题
                    leading: Container(
                      height: 20,
                      width: 20,
                      decoration: BoxDecoration(
                        color: Colors.cyanAccent.withOpacity(0.3),
                        shape: BoxShape.circle,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter弹出菜单插件flutter_popup_menu_button的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

vueper 1楼

更多关于Flutter弹出菜单插件flutter_popup_menu_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

PopupMenuButton 是 Flutter 提供的一个内置小部件，用于在用户点击按钮时显示一个弹出菜单。它通常用于在应用程序中提供上下文操作或选择项。以下是 PopupMenuButton 的基本用法和一些常见的自定义选项。

基本用法

导入 Material 库：

import 'package:flutter/material.dart';

创建 PopupMenuButton：

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PopupMenuButton Example'),
        actions: [
          PopupMenuButton(
            itemBuilder: (BuildContext context) {
              return [
                PopupMenuItem(
                  child: Text('Item 1'),
                  value: 'item1',
                ),
                PopupMenuItem(
                  child: Text('Item 2'),
                  value: 'item2',
                ),
                PopupMenuItem(
                  child: Text('Item 3'),
                  value: 'item3',
                ),
              ];
            },
            onSelected: (value) {
              // 处理选择的菜单项
              print('Selected: $value');
            },
          ),
        ],
      ),
      body: Center(
        child: Text('PopupMenuButton Example'),
      ),
    );
  }
}

自定义选项

更改图标：默认情况下，PopupMenuButton 使用三个点的图标。你可以通过 icon 属性来更改图标：

PopupMenuButton(
  icon: Icon(Icons.more_vert),
  itemBuilder: (BuildContext context) {
    return [
      PopupMenuItem(
        child: Text('Item 1'),
        value: 'item1',
      ),
      // 其他菜单项
    ];
  },
  onSelected: (value) {
    print('Selected: $value');
  },
);

添加分割线：你可以在菜单项之间添加分割线：

PopupMenuButton(
  itemBuilder: (BuildContext context) {
    return [
      PopupMenuItem(
        child: Text('Item 1'),
        value: 'item1',
      ),
      PopupMenuDivider(),
      PopupMenuItem(
        child: Text('Item 2'),
        value: 'item2',
      ),
    ];
  },
  onSelected: (value) {
    print('Selected: $value');
  },
);

禁用菜单项：你可以通过 PopupMenuItem 的 enabled 属性来禁用某个菜单项：

PopupMenuButton(
  itemBuilder: (BuildContext context) {
    return [
      PopupMenuItem(
        child: Text('Item 1'),
        value: 'item1',
      ),
      PopupMenuItem(
        child: Text('Disabled Item'),
        value: 'disabledItem',
        enabled: false,
      ),
    ];
  },
  onSelected: (value) {
    print('Selected: $value');
  },
);

自定义菜单项的高度：你可以通过 PopupMenuButton 的 elevation 属性来设置菜单的阴影高度：

PopupMenuButton(
  elevation: 8.0,
  itemBuilder: (BuildContext context) {
    return [
      PopupMenuItem(
        child: Text('Item 1'),
        value: 'item1',
      ),
      // 其他菜单项
    ];
  },
  onSelected: (value) {
    print('Selected: $value');
  },
);

自定义菜单项的颜色和形状：你可以通过 PopupMenuButton 的 color 和 shape 属性来设置菜单的背景颜色和形状：

PopupMenuButton(
  color: Colors.blue,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
  itemBuilder: (BuildContext context) {
    return [
      PopupMenuItem(
        child: Text('Item 1'),
        value: 'item1',
      ),
      // 其他菜单项
    ];
  },
  onSelected: (value) {
    print('Selected: $value');
  },
);

完整示例

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PopupMenuButton Example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PopupMenuButton Example'),
        actions: [
          PopupMenuButton(
            icon: Icon(Icons.more_vert),
            elevation: 8.0,
            color: Colors.blue,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
            itemBuilder: (BuildContext context) {
              return [
                PopupMenuItem(
                  child: Text('Item 1'),
                  value: 'item1',
                ),
                PopupMenuDivider(),
                PopupMenuItem(
                  child: Text('Item 2'),
                  value: 'item2',
                ),
                PopupMenuItem(
                  child: Text('Disabled Item'),
                  value: 'disabledItem',
                  enabled: false,
                ),
              ];
            },
            onSelected: (value) {
              print('Selected: $value');
            },
          ),
        ],
      ),
      body: Center(
        child: Text('PopupMenuButton Example'),
      ),
    );
  }
}