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方法，因此您需要在onTap中使用BubbleBottomBar。您可以实现以下示例中给出的changePage来处理onTap中的BubbleBottomBar。

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

1 个答案: