我试图在单击导航栏项时显示菜单。这是我的尝试:
@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)
也是如此)(如下图所示)。其次,我需要完全单击图标以显示菜单。
例如,当单击showMenu
中的PopupMenuButton
时,我尝试直接调用BottomNavigationBarItem
(index=2
调用的方法)。但是,如何确定菜单应从中出现的原始位置非常棘手。
答案 0 :(得分:4)
这里是直接使用showMenu
并调用函数buttonMenuPosition
来获取菜单位置的尝试。它相当脆弱,但是您可以使用bar.size.center
而不是bar.size.bottomRight
将按钮的位置更改为中间位置。使用某些 MATH ,并通过手动操作Offset
对象(如果/如果您有3个以上的项目),则可以更改位置,以使菜单位于非中心或最后)。
RelativeRect buttonMenuPosition(BuildContext c) {
final RenderBox bar = c.findRenderObject();
final RenderBox overlay = Overlay.of(c).context.findRenderObject();
final RelativeRect position = RelativeRect.fromRect(
Rect.fromPoints(
bar.localToGlobal(bar.size.bottomRight(Offset.zero), ancestor: overlay),
bar.localToGlobal(bar.size.bottomRight(Offset.zero), ancestor: overlay),
),
Offset.zero & overlay.size,
);
return position;
}
@override
Widget build(BuildContext context) {
final key = GlobalKey<State<BottomNavigationBar>>();
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text("Home"),
),
bottomNavigationBar: BottomNavigationBar(
key: key,
items: [
const BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text('Home')),
const BottomNavigationBarItem(
icon: Icon(Icons.book), title: Text('Second')),
const BottomNavigationBarItem(
icon: Icon(Icons.add), title: Text('more')),
],
currentIndex: 0,
onTap: (index) async {
final position = buttonMenuPosition(key.currentContext);
if (index == 2) {
final result = await showMenu(
context: context,
position: position,
items: <PopupMenuItem<String>>[
const PopupMenuItem<String>(
child: Text('test1'), value: 'test1'),
const PopupMenuItem<String>(
child: Text('test2'), value: 'test2'),
],
);
}
},
),
body: Container()));
}
答案 1 :(得分:1)
这是我的尝试:
@override
Widget build(BuildContext context) {
return Material(
child: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text("Home"),
),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(
icon: new Icon(Icons.book), title: Text('Second')),
BottomNavigationBarItem(
icon: new Icon(Icons.add),
title: Text('More')),
],
currentIndex: 0,
onTap: (int index) async {
if(index == 2){
await showMenu<String>(
context: context,
position: RelativeRect.fromLTRB(1000.0, 1000.0, 0.0, 0.0),
items: <PopupMenuItem<String>>[
new PopupMenuItem<String>(
child: const Text('test1'), value: 'test1'),
new PopupMenuItem<String>(
child: const Text('test2'), value: 'test2'),
],
elevation: 8.0,
);
}
},
),
body: new Container())));
}
基本上按照您所说的使用showMenu
方法,除了我将RelativeRect的值设置为1000.0以便它位于任何设备的右下角。您可以将这些值弄乱,以在图标上方更准确地获得位置,但我认为这样效果很好: