在 Flutter 中为 BubbleBottomBarItem 添加 onPressed 或 onTab

Question

一整天都在努力解决这个问题。我基本上是新手。我希望底部图标按钮有自己的 onTap 方法，如普通的 FAB 或 BottomNavigationBar。请帮忙！谢谢

这是代码。

    return BubbleBottomBar(
      hasNotch: true,
      opacity: .2,
      currentIndex: currentIndex,
      onTap: changePage,
      borderRadius: BorderRadius.vertical(
          top: Radius.circular(
              16)), 
      elevation: 8,
      items: <BubbleBottomBarItem>[
        BubbleBottomBarItem(
            backgroundColor: Colors.indigo,
            icon: Icon(
              Icons.home,
              color: Colors.black,
            ),
            activeIcon: Icon(
              Icons.home,
              color: Colors.indigo,
            ),
            title: Text("Home")),
        BubbleBottomBarItem(
            backgroundColor: Colors.indigo,
            icon: Icon(
              Icons.folder_open,
              color: Colors.black,
            ),
            activeIcon: Icon(
              Icons.folder_open,
              color: Colors.indigo,
            ),
            title: Text("Get Job")),
        BubbleBottomBarItem(
            backgroundColor: Colors.indigo,
            icon: Icon(
              Icons.add_circle_outline,
              color: Colors.black,
            ),
            activeIcon: Icon(
              Icons.add_circle_outline,
              color: Colors.indigo,
            ),
            title: Text("Add Job")),
      ],
    );

  }
}

Answer 1

BubbleBottomBarItem没有任何onTap或onPressed方法，因此您需要在BubbleBottomBar中使用onTap。您可以按照下面的示例实施 changePage 来处理 BubbleBottomBar 中的 onTap。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int currentIndex;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    currentIndex = 0;
  }

  void changePage(int index) {
    setState(() {
      currentIndex = index;
    });

    //You can have a switch case to Navigate to different pages
    switch (currentIndex){
      case 0:
         Navigator.push( context,
            MaterialPageRoute(builder: (context) => AnyClass()),
         );
         break;
     ...
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      bottomNavigationBar: BubbleBottomBar(
        hasNotch: true,
        fabLocation: BubbleBottomBarFabLocation.end,
        opacity: .2,
        currentIndex: currentIndex,
        onTap: changePage,
        borderRadius: BorderRadius.vertical(
            top: Radius.circular(
                16)), 
        elevation: 8,
        items: <BubbleBottomBarItem>[
        ...
        ],
      ),
    );
  }
}

在 Flutter 中为 BubbleBottomBarItem 添加 onPressed 或 onTab

Adding onPressed or onTab to BubbleBottomBarItem in Flutter

widget

dart

floating-action-button

flutter

bottomnavigationview