Flutter扩展菜单功能插件flutter_expanded_menu的使用

Flutter扩展菜单功能插件flutter_expanded_menu的使用

flutter_expanded_menu 是一个用于在 Flutter 应用中实现可展开/折叠菜单的小部件。

预览

![截图]

开始使用

1. 添加依赖

首先，在你的应用的 pubspec.yaml 文件中添加以下代码：

dependencies:
  flutter_expanded_menu: 0.0.1

2. 导入包

然后，在你的 Dart 代码中导入该包：

import 'package:flutter_expanded_menu/flutter_expanded_menu.dart';

示例

下面是一个完整的示例，展示了如何使用 flutter_expanded_menu 插件来创建一个带有不同方向和位置的菜单。

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

// 假设你已经定义了Item类
class Item {
  final String title;
  final String iconPath;
  final int count;

  Item(this.title, this.iconPath, this.count);
}

class ItemWidget extends StatelessWidget {
  final Item data;

  ItemWidget({required this.data});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(8.0),
      ),
      child: Column(
        children: [
          Image.asset(data.iconPath, width: 24, height: 24),
          SizedBox(height: 4),
          Text(data.title),
        ],
      ),
    );
  }
}

class AnchorWidget extends StatelessWidget {
  final List<Item> items;
  final bool isExpand;

  AnchorWidget({required this.items, required this.isExpand});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        color: Colors.grey[300],
        borderRadius: BorderRadius.circular(8.0),
      ),
      child: Row(
        children: items.map((item) => Text(item.title)).toList(),
      ),
    );
  }
}

class MenuDataChangedListener extends ValueNotifier<bool> {
  MenuDataChangedListener(bool value) : super(value);

  void toggle() {
    value = !value;
  }
}

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  MenuDataChangedListener notifier = MenuDataChangedListener(true);

  var items = [
    Item("健康监控", "assets/images/ic_health_manager.png", 6),
    Item("地图管理", "assets/images/ic_map_manager.png", 0),
    Item("排班管理", "assets/images/ic_schedule_manager.png", 0),
    Item("任务管理", "assets/images/ic_task_manager.png", 0),
    Item("机器设置", "assets/images/ic_robot_settings.png", 2),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Expanded Menu Demo'),
      ),
      body: Stack(
        children: [
          Positioned(
            left: 10,
            top: 10,
            child: ExpandedMenuWidget<Item>(
              size: 48,
              direction: Axis.horizontal,
              anchorDirection: AxisDirection.left,
              itemsContainerAlignment: Alignment.topLeft,
              menuItems: items,
              notifier: notifier,
              itemBuilder: (_, index, item) {
                return ItemWidget(data: item);
              },
              anchorBuilder: (_, items, isExpand) {
                return AnchorWidget(items: items, isExpand: isExpand);
              },
              onAnchorTap: (isExpand) {},
              onItemTap: (item) {},
            ),
          ),
          Positioned(
            left: 10,
            top: 100,
            child: ExpandedMenuWidget<Item>(
              size: 48,
              direction: Axis.horizontal,
              anchorDirection: AxisDirection.left,
              itemsContainerAlignment: Alignment.topRight,
              menuItems: items,
              notifier: notifier,
              itemBuilder: (_, index, item) {
                return ItemWidget(data: item);
              },
              anchorBuilder: (_, items, isExpand) {
                return AnchorWidget(items: items, isExpand: isExpand);
              },
              onAnchorTap: (isExpand) {},
              onItemTap: (item) {},
            ),
          ),
          Positioned(
            left: 10,
            top: 200,
            child: ExpandedMenuWidget<Item>(
              size: 48,
              direction: Axis.horizontal,
              anchorDirection: AxisDirection.left,
              itemsContainerAlignment: Alignment.topCenter,
              menuItems: items,
              notifier: notifier,
              itemBuilder: (_, index, item) {
                return ItemWidget(data: item);
              },
              anchorBuilder: (_, items, isExpand) {
                return AnchorWidget(items: items, isExpand: isExpand);
              },
              onAnchorTap: (isExpand) {},
              onItemTap: (item) {},
            ),
          ),
          Positioned(
            right: 10,
            top: 300,
            child: ExpandedMenuWidget<Item>(
              size: 48,
              direction: Axis.horizontal,
              anchorDirection: AxisDirection.right,
              itemsContainerAlignment: Alignment.topRight,
              menuItems: items,
              notifier: notifier,
              itemBuilder: (_, index, item) {
                return ItemWidget(data: item);
              },
              anchorBuilder: (_, items, isExpand) {
                return AnchorWidget(items: items, isExpand: isExpand);
              },
              onAnchorTap: (isExpand) {},
              onItemTap: (item) {},
            ),
          ),
          Positioned(
            left: 10,
            top: 400,
            child: ExpandedMenuWidget<Item>(
              size: 48,
              direction: Axis.vertical,
              anchorDirection: AxisDirection.up,
              itemsContainerAlignment: Alignment.topLeft,
              menuItems: items,
              notifier: notifier,
              itemBuilder: (_, index, item) {
                return ItemWidget(data: item);
              },
              anchorBuilder: (_, items, isExpand) {
                return AnchorWidget(items: items, isExpand: isExpand);
              },
              onAnchorTap: (isExpand) {},
              onItemTap: (item) {},
            ),
          ),
          Positioned(
            right: 10,
            bottom: 10,
            child: ExpandedMenuWidget<Item>(
              size: 48,
              direction: Axis.vertical,
              anchorDirection: AxisDirection.down,
              itemsContainerAlignment: Alignment.bottomLeft,
              menuItems: items,
              notifier: notifier,
              itemBuilder: (_, index, item) {
                return ItemWidget(data: item);
              },
              anchorBuilder: (_, items, isExpand) {
                return AnchorWidget(items: items, isExpand: isExpand);
              },
              onAnchorTap: (isExpand) {},
              onItemTap: (item) {},
            ),
          ),
        ],
      ),
    );
  }
}

许可证

版权所有 (c) 2023, porum

根据Apache许可证2.0版（"许可证"）获得许可；
除非符合许可证，否则不得使用此文件。
您可以在以下位置获得许可证的副本：

   http://www.apache.org/licenses/LICENSE-2.0

除非适用法律要求或书面同意，根据许可证分发的软件
按"原样"分发，无任何明示或暗示的担保或条件。
有关许可证下管理权限和
限制的特定语言，请参阅许可证。