Flutter弹出菜单插件my_popup_menu的使用

Flutter弹出菜单插件my_popup_menu的使用

特性

展示具有指定大小的弹出菜单。

开始使用

请参见示例文件夹。

使用方法

请参考以下示例代码：

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';
import 'package:my_popup_menu/my_popup_menu.dart';

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

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

  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return const PlatformApp(
      title: 'Flutter Demo',
      home: ExampleHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class ExampleHomePage extends StatefulWidget {
  const ExampleHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<ExampleHomePage> createState() => _ExampleHomePageState();
}

class _ExampleHomePageState extends State<ExampleHomePage> {
  final StreamController<Size> controller = StreamController<Size>.broadcast();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return PlatformScaffold(
      appBar: PlatformAppBar(
        title: Row(
          children: [
            Expanded(child: Container()), // 占位符
            MyPopupIconButton( // 弹出按钮
              isSelected: true, // 是否选中
              menuContent: SizedBox( // 菜单内容
                width: 200, // 宽度
                height: 400, // 高度
              ),
              icon: Icon(
                PlatformIcons(context).book, // 图标
              ),
              notSelectedIcon: Icon(
                PlatformIcons(context).book, // 未选中时的图标
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


my_popup_menu 是一个用于在 Flutter 应用中创建弹出菜单的插件。它可以帮助你轻松地在应用中显示自定义的弹出菜单。以下是如何使用 my_popup_menu 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 my_popup_menu 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  my_popup_menu: ^1.0.0  # 请根据实际情况使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 my_popup_menu 插件：

import 'package:my_popup_menu/my_popup_menu.dart';

3. 使用 MyPopupMenu

MyPopupMenu 是一个可以显示弹出菜单的小部件。你可以将它放在任何你想要触发弹出菜单的地方，比如一个按钮或图标。

以下是一个简单的示例，展示如何在按钮点击时显示一个弹出菜单：

import 'package:flutter/material.dart';
import 'package:my_popup_menu/my_popup_menu.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My Popup Menu Example'),
        ),
        body: Center(
          child: MyPopupMenu(
            child: Text('Show Menu'),
            menuBuilder: () => [
              PopupMenuItem(
                value: 1,
                child: Text('Option 1'),
              ),
              PopupMenuItem(
                value: 2,
                child: Text('Option 2'),
              ),
              PopupMenuItem(
                value: 3,
                child: Text('Option 3'),
              ),
            ],
            onSelected: (value) {
              print('Selected: $value');
            },
          ),
        ),
      ),
    );
  }
}
回到顶部