Flutter悬浮菜单插件hover_menu的使用

Hover Menu for Flutter

Flutter中的hover_menu插件用于创建桌面和Web应用程序的悬浮菜单，提供常见的Web菜单体验。

Features

• 当用户悬停在指定标题小部件上时显示易于使用的悬浮菜单。
• 当用户停止悬停在菜单或其项上时关闭菜单。
• 可自定义。

Installation

要在项目中使用此包，请在pubspec.yaml文件中添加hover_menu作为依赖项：

dependencies:
  hover_menu: ^1.1.2

然后，在终端中运行flutter packages get。

Usage

首先导入包到你的Dart文件中：

import 'package:hover_menu/hover_menu.dart';

接下来可以在应用中创建一个HoverMenu小部件：

HoverMenu(
  title: Text('Menu Title'),
  items: [
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
    ListTile(title: Text('Item 3')),
  ],
)

还可以为菜单设置自定义宽度：

HoverMenu(
  title: Text('Menu Title'),
  items: [
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
    ListTile(title: Text('Item 3')),
  ],
  width: 250,
)

Example

下面是一个完整的示例，演示如何在应用中使用HoverMenu小部件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Hover Menu Example')),
        body: Center(
          child: HoverMenu(
            title: InkWell(
              onTap: () {},
              child: Text('Menu Title'),
            ),
            items: [
              InkWell(
                onTap: () {
                  print('Item 1 clicked');
                },
                child: ListTile(title: Text('Item 1')),
              ),
              InkWell(
                onTap: () {
                  print('Item 2 clicked');
                },
                child: ListTile(title: Text('Item 2')),
              ),
              InkWell(
                onTap: () {
                  print('Item 3 clicked');
                },
                child: ListTile(title: Text('Item 3')),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

使用HoverMenuLastItem

如果需要为最后一个菜单项提供下拉选项，并且希望下拉部分与菜单选项的末端对齐并向相反方向延伸，可以使用HoverMenuLastItem类。

HoverMenuLastItem(
title: HoverText("Company"),
items: ...
width: 500,
),

Limitation

不建议在移动应用程序中使用此包，因为标准的Drawer和AppBar提供了更好的用户体验。可以通过条件判断来选择是否使用hover_menu。

bool isDesktopOrWeb() {
  if (kIsWeb) {
    return true;
  }
  if (Platform.isWindows || Platform.isMacOS || Platform.isLinux) {
    return true;
  }

  return false;
}

Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: isDesktopOrWeb() ? null : AppBar(title: Text('Conditional Widget Example')),
        drawer: isDesktopOrWeb() ? null : MyDrawer(),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              if (isDesktopOrWeb()) HoverMenu(
                  title: Text('Menu Title'),
                  items: [
                    ListTile(title: Text('Item 1')),
                    ListTile(title: Text('Item 2')),
                    ListTile(title: Text('Item 3')),
                  ],
                ),
            ],
          ),
        ),
      ),
    );
  }

Developer & License

该包由Feras Abdalrahman开发，发布在MIT许可下。

如果您觉得这个包有用，请给仓库加个星⭐。

更多详细信息请参阅官方文档。