dart - Flutter - 在 BottomNavigationBar 中显示一个 PopupMenuButton
问题描述
我试图在单击导航栏项目时显示菜单。这是我的尝试:
@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)
)(如下图所示)。第二个是我需要准确地单击图标才能显示菜单。
当单击(例如)a 时,我尝试showMenu
直接调用(调用的方法)。但是如何确定菜单应该从哪里出现是很棘手的。PopupMenuButton
BottomNavigationBarItem
index=2
解决方案
这是一个尝试,showMenu
直接使用并调用函数buttonMenuPosition
来获取菜单的位置。它相当脆弱,但您可以将按钮的位置更改为中间,例如使用bar.size.center
而不是bar.size.bottomRight
. 通过一些数学和手动操作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()));
}
推荐阅读
- c# - 远程桌面上的远程调试
- android - 如果没有验证证明、会话信息或临时证明,则无法创建 PhoneAuthCredential。当我删除 firebase 用户时
- html - 为什么我的导航栏不像纵向滚动那样横向滚动?
- javascript - 我如何在 React 中实现输入更改的去抖动自动保存?
- drag-and-drop - 如何在 GraphicsScene 中的 GraphicsItem 中获取拖放事件?
- laravel - 如何在 PhpStorm 中运行终端命令作为启动任务?
- vue.js - Vueutify 导航抽屉 - 更改背景图像
- module - 为什么 Utop 对待这个 Ocaml 代码的方式不同
- swift - Swift - 在嵌入在选项卡栏中的导航控制器中重置 vc
- python - 在 Flask 中重定向页面时遇到问题