Flutter弹出式菜单列表插件flutter_popup_menulist的使用

Flutter弹出式菜单列表插件flutter_popup_menulist的使用

flutter_popup_menulist 是一个用于 Flutter 的弹出式菜单列表插件。它可以以树形结构展示菜单项，并且高度可定制化。它只管理数据的树形结构，UI 部分则需要自行设计。

示例

开始使用

安装

  1. 添加依赖

    在 pubspec.yaml 文件中添加依赖：

    dependencies:
  flutter_popup_menulist: [version]

  2. 获取依赖

    在命令行中运行以下命令来获取依赖：

    $ flutter pub get

  3. 导入库

    在 Dart 文件中导入库：

    import 'package:flutter_popup_menulist/flutter_popup_menulist.dart';

示例代码

import 'dart:convert';

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

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<MenuItem> menuList = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    getMenuList();
  }

  // 获取菜单列表
  void getMenuList() {
    String menuListJson =
        "[{\"id\":8,\"parentId\":0,\"name\":\"Test1\",\"type\":0,\"typeValue\":\"brand-new\",\"subMenuList\":null,\"level\":1},{\"id\":12,\"parentId\":0,\"name\":\"Test2\",\"type\":2,\"typeValue\":\"3\",\"subMenuList\":null,\"level\":1},{\"id\":4,\"parentId\":0,\"name\":\"Test3\",\"type\":0,\"typeValue\":\"hfmszs\",\"subMenuList\":[{\"id\":13,\"parentId\":4,\"name\":\"Test31\",\"type\":0,\"typeValue\":\"hfqxcp\",\"subMenuList\":null,\"level\":2},{\"id\":19,\"parentId\":4,\"name\":\"Test32\",\"type\":null,\"typeValue\":null,\"subMenuList\":[{\"id\":35,\"parentId\":19,\"name\":\"Test321\",\"type\":0,\"typeValue\":\"xzqjtl\",\"subMenuList\":null,\"level\":3},{\"id\":36,\"parentId\":19,\"name\":\"Test322\",\"type\":0,\"typeValue\":\"jhs\",\"subMenuList\":null,\"level\":3},{\"id\":37,\"parentId\":19,\"name\":\"Test323\",\"type\":0,\"typeValue\":\"xhjh\",\"subMenuList\":null,\"level\":3}],\"level\":2}],\"level\":1}]";
    List array = json.decode(menuListJson);
    array.forEach((item) {
      MenuItem menu = MenuItem.fromJson(item);
      print(menu.typeValue);
      menuList.add(menu);
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('弹出式菜单列表示例'),
        ),
        body: MenuListPopupWidget(
          bodyWidget: Center(
            child: Text('点击这里打开菜单'),
          ),
          menuList: menuList,
          headerImageUrl:
              "https://img.alicdn.com/tfs/TB1EGGoLXXXXXcLXpXXXXXXXXXX-123-38.png",
          headerImageRatio: 3.236,
          headerImageFit: BoxFit.fitHeight,
          menuItemClick: (MenuItem item) {
            if (item.children == null || item.children.length == 0) {
              print('点击了 : ${item.name}');
            }
          },
        ),
      ),
    );
  }
}

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

1 回复

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


flutter_popup_menulist 是一个用于在 Flutter 应用中显示弹出式菜单列表的插件。它可以帮助你轻松地在用户点击某个按钮或区域时显示一个菜单列表，用户可以选择其中的选项。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  flutter_popup_menulist: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装插件。

基本使用

以下是一个简单的示例，展示了如何使用 flutter_popup_menulist 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Popup Menu List Example'),
        ),
        body: Center(
          child: PopupMenuList(
            child: Text('Show Menu'),
            menuItems: [
              MenuItem(title: 'Option 1', onTap: () => print('Option 1 selected')),
              MenuItem(title: 'Option 2', onTap: () => print('Option 2 selected')),
              MenuItem(title: 'Option 3', onTap: () => print('Option 3 selected')),
            ],
          ),
        ),
      ),
    );
  }
}

参数说明

  • child: 触发弹出菜单的 Widget，通常是一个按钮或文本。
  • menuItems: 菜单项的列表，每个菜单项是一个 MenuItem 对象。
    • title: 菜单项的标题。
    • onTap: 当用户选择该菜单项时触发的回调函数。
  • position: 菜单弹出的位置，可以是 PopupMenuPosition.top 或 PopupMenuPosition.bottom，默认是 PopupMenuPosition.bottom。
  • backgroundColor: 菜单的背景颜色。
  • textStyle: 菜单项的文本样式。
  • elevation: 菜单的阴影高度。

自定义样式

你可以通过传递不同的参数来自定义菜单的样式。例如：

PopupMenuList(
  child: Text('Show Menu', style: TextStyle(color: Colors.blue)),
  menuItems: [
    MenuItem(title: 'Option 1', onTap: () => print('Option 1 selected')),
    MenuItem(title: 'Option 2', onTap: () => print('Option 2 selected')),
    MenuItem(title: 'Option 3', onTap: () => print('Option 3 selected')),
  ],
  position: PopupMenuPosition.top,
  backgroundColor: Colors.white,
  textStyle: TextStyle(color: Colors.black, fontSize: 16),
  elevation: 8,
)

处理菜单项选择

在 MenuItem 的 onTap 回调中，你可以处理用户选择菜单项的逻辑。例如，你可以导航到另一个页面、显示一个对话框或执行其他操作。

MenuItem(
  title: 'Option 1',
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => AnotherPage()),
    );
  },
)
回到顶部