dart – Flutter – 在BottomNavigationBar中显示PopupMenuButton

概述我想在单击导航栏项目时显示菜单.这是我的尝试： @override Widget build(BuildContext context) { return DefaultTabController( length: 3, child: Scaffold( appBar: MyAppBar( title: 我想在单击导航栏项目时显示菜单.这是我的尝试：

@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的显示.在我无法删除的标题图标之间有一个填充(即使添加填充：EdgeInsets.all(0.0))(如下图所示).第二个是我需要完全点击图标才能显示菜单.

当点击index = 2(例如)的BottomNavigationbarItem时,我尝试直接调用showMenu(PopupMenubutton调用的方法).但是如何确定菜单应该出现的原点的位置是很棘手的.

解决方法 这是一个直接使用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),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),const BottomNavigationbarItem(                    icon: Icon(Icons.book),const BottomNavigationbarItem(                    icon: Icon(Icons.add),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'),const PopupMenuItem<String>(                          child: Text('test2'),);                }              },body: Container()));  }

总结

以上是内存溢出为你收集整理的dart – Flutter – 在BottomNavigationBar中显示PopupMenuButton全部内容，希望文章能够帮你解决dart – Flutter – 在BottomNavigationBar中显示PopupMenuButton所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。