dart – Flutter – 在BottomNavigationBar中显示PopupMenuButto

发布时间：2020-12-14 14:51:25 所属栏目：百科来源：网络整理

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

我想在单击导航栏项目时显示菜单.这是我的尝试：

@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))(如下图所示).第二个是我需要完全点击图标才能显示菜单.

enter image description here

当点击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()));
  }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!