flutter 鼠标右键点击弹出菜单,菜单支持二级分类
时间: 2024-09-19 21:06:51 浏览: 122
Flutter高阶技术:如何实现自定义弹出菜单框
在 Flutter 中实现鼠标右键点击(context menu)弹出带二级分类的菜单,你可以使用 `ContextMenuBuilder` 包裹在一个 `MouseRegion` 组件里,同时配合自定义的 `DropdownMenuItem` 和 `DropdownButton` 来构建菜单结构。下面是一个基本的示例:
首先,你需要导入必要的库:
```dart
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart'; // 引入 MouseRegion
```
然后创建一个自定义的菜单项,用于显示一级和二级分类:
```dart
class MenuCategoryItem extends StatelessWidget {
final String primaryTitle;
final List<String> secondaryTitles;
MenuCategoryItem({required this.primaryTitle, required this.secondaryTitles});
@override
Widget build(BuildContext context) {
return DropdownMenuItem(
value: primaryTitle,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(primaryTitle),
SizedBox(height: 4),
Expanded(child: ListTile(items: secondaryTitles.map((title) => ListTile(title: Text(title))).toList()),
],
),
);
}
}
```
接下来,在需要展示右键菜单的地方使用 `MouseRegion` 和 `ContextMenuBuilder`:
```dart
MouseRegion(
onShowMenu: (_) {
// 显示菜单的位置和内容
BuildContext context = findRenderObject(context).context;
showContextMenu(context: context, itemBuilder: (BuildContext context) {
List<Widget> menuItems = [
MenuCategoryItem(primaryTitle: "一级菜单1", secondaryTitles: ["二级菜单1.1", "二级菜单1.2"]),
MenuCategoryItem(primaryTitle: "一级菜单2", secondaryTitles: ["二级菜单2.1", "二级菜单2.2"]),
];
return menuItems.map((item) => item).toList();
}, padding: EdgeInsets.all(8), verticalOffset: 0);
},
child: YourWidget(), // 替换为你要响应右键点击的 widget
),
```
这里 `findRenderObject(context)` 是为了得到正确的渲染上下文,`showContextMenu` 函数传递了一个自定义生成器 `itemBuilder`,它会负责生成菜单项。
阅读全文