Flutter浮动菜单插件menu_float的使用
Flutter浮动菜单插件menu_float的使用
这个小部件会在点击另一个小部件(如按钮或链接)时在窗口中显示一个浮动菜单。
开始使用
使用非常简单。浮动菜单接收一个泛型对象来确定点击选项后要发送的对象。
class Product {
final String name;
final double value;
...
}
final options = [
MenuFloatOption<Product>(
label: e.name,
value: e,
onClick: (Product v) {
final n = v.name;
print('Product is: $n');
})
),
...
]
MenuFloat<Product>(
items: options,
child: ElevatedButton(
onPressed: () {},
child: const Text('点击我')
),
)
更多详情请参见项目中的演示文件夹。
属性说明:
属性 | 类型 | 描述 |
---|---|---|
top | boolean | 定义优先打开菜单在触发器上方。 |
left | boolean | 定义优先打开菜单在触发器左侧。 |
right | boolean | 定义优先打开菜单在触发器右侧。 |
child | Widget | 触发器小部件(如ElevatedButton、Text等)。 |
items | List<MenuFloatOption> | 菜单选项。 |
示例代码
以下是 example/lib/main.dart
文件中的完整示例代码:
import 'package:flutter/material.dart';
import 'menu_float_example.dart';
const double landscapeWidth = 1024;
const double landscapeHeight = 769;
void main() {
runApp(const MenuFloatDemo());
}
class MenuFloatExampleDemo extends StatelessWidget {
final bool top;
final bool left;
final bool right;
final double x;
final double y;
const MenuFloatExampleDemo({
Key? key,
this.top = false,
this.left = false,
this.right = false,
required this.x,
required this.y,
}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
return MenuFloatExampleTestPage(
x: x, y: y, top: top, left: left, right: right);
}
}
/// 这是一个无状态小部件,用于创建一个浮动菜单按钮
class MenuFloatDemo extends StatelessWidget {
const MenuFloatDemo({Key? key}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Stack(
children: const [
// y: 0
MenuFloatExampleDemo(x: 0, y: 0),
MenuFloatExampleDemo(x: 500, y: 0),
MenuFloatExampleDemo(x: 930, y: 0),
// y: 400
MenuFloatExampleDemo(x: 0, y: 400),
MenuFloatExampleDemo(x: 500, y: 400),
MenuFloatExampleDemo(x: 930, y: 400),
// y: 730
MenuFloatExampleDemo(x: 0, y: 730),
MenuFloatExampleDemo(x: 500, y: 730),
MenuFloatExampleDemo(x: 930, y: 730),
],
),
);
}
}
更多关于Flutter浮动菜单插件menu_float的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter浮动菜单插件menu_float的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter项目中使用menu_float
插件来实现浮动菜单的一个示例代码案例。menu_float
插件允许你在应用中创建和管理浮动菜单,这在需要快速访问特定功能时非常有用。
首先,确保你已经在pubspec.yaml
文件中添加了menu_float
依赖:
dependencies:
flutter:
sdk: flutter
menu_float: ^最新版本号 # 请替换为实际的最新版本号
然后,运行flutter pub get
来安装依赖。
接下来,你可以在你的Flutter应用中实现浮动菜单。以下是一个简单的示例:
import 'package:flutter/material.dart';
import 'package:menu_float/menu_float.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
MenuFloatController _menuFloatController = MenuFloatController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Floating Menu Example'),
),
body: Stack(
children: [
Center(
child: Text(
'Swipe from the bottom-right corner to open the menu',
style: TextStyle(fontSize: 24),
),
),
MenuFloat(
controller: _menuFloatController,
// 设置菜单项
menuItems: [
MenuItem(
icon: Icons.home,
label: 'Home',
onTap: () {
// 处理点击事件
print('Home clicked');
},
),
MenuItem(
icon: Icons.settings,
label: 'Settings',
onTap: () {
// 处理点击事件
print('Settings clicked');
},
),
MenuItem(
icon: Icons.exit_to_app,
label: 'Logout',
onTap: () {
// 处理点击事件
print('Logout clicked');
},
),
],
// 菜单显示位置
menuPosition: MenuPosition.bottomRight,
// 菜单动画曲线
menuAnimationCurve: Curves.easeInOut,
// 菜单背景颜色
menuBackgroundColor: Colors.white,
// 菜单项文字颜色
menuItemTextColor: Colors.black,
// 菜单项文字大小
menuItemFontSize: 18.0,
// 菜单项图标大小
menuItemIconSize: 24.0,
// 菜单项图标颜色
menuItemIconColor: Colors.black,
// 菜单阴影
menuElevation: 8.0,
// 菜单打开动画时长
menuOpenDuration: Duration(milliseconds: 300),
// 菜单关闭动画时长
menuCloseDuration: Duration(milliseconds: 300),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// 手动打开或关闭菜单
if (_menuFloatController.isMenuOpen) {
_menuFloatController.closeMenu();
} else {
_menuFloatController.openMenu();
}
},
tooltip: 'Toggle Menu',
child: Icon(Icons.menu),
),
);
}
}
在这个示例中,我们做了以下几件事:
- 依赖管理:在
pubspec.yaml
文件中添加了menu_float
依赖。 - 创建主应用:创建了一个简单的Flutter应用,包含一个
Scaffold
,其中有一个AppBar
和一个居中的文本提示。 - 添加浮动菜单:使用
MenuFloat
小部件来创建浮动菜单,并设置了菜单项、菜单位置、动画曲线等属性。 - 处理菜单项点击事件:为每个菜单项设置了
onTap
回调,以处理点击事件。 - 手动控制菜单:通过
FloatingActionButton
手动打开或关闭菜单。
这样,你就可以在你的Flutter应用中实现一个功能齐全的浮动菜单了。记得根据实际情况调整菜单项和样式。