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许可下。
如果您觉得这个包有用，请给仓库加个星⭐。
更多详细信息请参阅官方文档。