如何使底部应用栏或导航栏的边框在Flutter中唯一选定的项目下?

rnmwe5a2  于 2023-05-19  发布在  Flutter
关注(0)|答案(1)|浏览(128)

我试图找到类似的东西,但我找不到任何东西

vfwfrxfs

vfwfrxfs1#

我快速编写了一个BottomNavigationBar,它可以在当前选中的项下手动添加一个小的彩色Container。我觉得这就是你想要的。当然,你可以根据自己的需要来设计。

int index = 0;

@override
  Widget build(BuildContext context) {

return Scaffold(
  bottomNavigationBar: BottomNavigationBar(

    currentIndex: index,
    onTap: (int index) {
      setState(() {this.index = index;});
    },

    items: [
      BottomNavigationBarItem(
          label: "Item 1",
          icon: const Icon(Icons.ac_unit),
          activeIcon: Column(children: [const Icon(Icons.ac_unit), const SizedBox(height: 5), Container(color: Colors.blue, width: 7, height: 2)],)
      ),

      BottomNavigationBarItem(
          label: "Item 2",
          icon: const Icon(Icons.gamepad),
          activeIcon: Column(children: [const Icon(Icons.gamepad), const SizedBox(height: 5), Container(color: Colors.blue, width: 7, height: 2)],)),

      BottomNavigationBarItem(
        label: "Item 3",
        icon: const Icon(Icons.dark_mode),
          activeIcon: Column(children: [const Icon(Icons.dark_mode), const SizedBox(height: 5), Container(color: Colors.blue, width: 7, height: 2)],)
      ),
    ],
  ),
 );
}

相关问题