在Flutter的新版本中,我尝试将TopBar菜单与鼠标悬停在按钮上时出现的子菜单集成在一起,但我无法让它在鼠标悬停在子菜单上时显示。
你能帮帮我吗?
Flutter3.7.0·通道稳定·https://github.com/flutter/flutter.git框架·修订版b06b8b2710(3天前)·2023年1月23日16:55:55 - 0800引擎·修订版b24591ed32工具·Dart 2.19.0·开发工具2.20.1
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(const MenuBarApp());
class MyMenuBar extends StatefulWidget implements PreferredSizeWidget {
const MyMenuBar({super.key});
@override
State<MyMenuBar> createState() => _MyMenuBarState();
@override
Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}
class _MyMenuBarState extends State<MyMenuBar> {
final MenuController _menuController = MenuController();
@override
void initState() {
// TODO: implement initState
super.initState();
}
@override
Widget build(BuildContext context) {
return Row(
children: [
MenuAnchor(
controller: _menuController,
style: const MenuStyle(
backgroundColor: MaterialStatePropertyAll<Color>(Colors.black),
padding:
MaterialStatePropertyAll<EdgeInsets>(EdgeInsets.all(8))),
menuChildren: _getMenus(),
builder: (context, controller, child) {
return TextButton(
child: Text("Home"),
onPressed: () {},
onHover: (_) {
if (controller.isOpen) {
Future.delayed(const Duration(milliseconds: 200),
() {
controller.close();
});
} else {
controller.open();
}
});
},
),
],
);
}
List<Widget> _getMenus() {
return [
MenuItemButton(
onHover: (_) {
_menuController.open();
},
child: TextButton(
onPressed: () {},
child: const Text(
"About",
textAlign: TextAlign.left,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 16, fontWeight: FontWeight.w500, color: Colors.white),
),
),
)
];
}
}
class MenuBarApp extends StatelessWidget {
const MenuBarApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(appBar: MyMenuBar()),
);
}
}
1条答案
按热度按时间wwodge7n1#
您可以使用
MouseRegion
来实现悬停效果。https://api.flutter.dev/flutter/widgets/MouseRegion-class.html