我试图在单击导航栏项目时显示菜单。这是我的尝试:
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: MyAppBar(
title: "Home",
context: context,
),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(
icon: new Icon(Icons.book), title: Text('Second')),
BottomNavigationBarItem(
icon: new PopupMenuButton(
icon: Icon(Icons.add),
itemBuilder: (_) => <PopupMenuItem<String>>[
new PopupMenuItem<String>(
child: const Text('test1'), value: 'test1'),
new PopupMenuItem<String>(
child: const Text('test2'), value: 'test2'),
],
),
title: Text('more')),
],
currentIndex: 0,
),
body: new Container()));
}
我遇到了两个问题。第一个是NavigationBarItem的显示。在icon
和title
之间有一个填充,我无法删除(即使添加padding: EdgeInsets.all(0.0)
)(如下图所示)。第二个是我需要准确地点击图标,菜单才会出现。
我尝试在单击index=2
的BottomNavigationBarItem
时直接调用showMenu
(PopupMenuButton
调用的方法)。但如何确定菜单应该出现的原点位置是很棘手的。
2条答案
按热度按时间nfs0ujit1#
这里尝试直接使用
showMenu
并调用函数buttonMenuPosition
来获取菜单的位置。它相当脆弱,但您可以将按钮的位置更改为中间,例如使用bar.size.center
而不是bar.size.bottomRight
。使用一些MATH并通过手动操作Offset
对象(如果/当您有超过3个项目时),您可以更改位置以使菜单不在中心或末尾)。avkwfej42#
以下是我的尝试:
基本上使用
showMenu
方法,就像你说的,除了我把RelativeRect的值设置为1000.0,这样它就可以在任何设备的右下角。你可以修改这些值来获得图标上方的位置,但我认为这样做效果很好: