一个具有盒子动画的自定义底部导航栏。它的灵感来自早期的一些设计,但更简化且令人兴奋。

演示

用法

要使用该软件包,请首先在 pubspec.yaml 文件中将 custom_bottom_navigation 添加为依赖项。

然后,将 CustomBottomBoxBar() 添加到 Scaffold 的 bottomNavigationBar: 字段中。您需要提供两个字段:items(CustomBottomBaxBarItem 列表)和 onIndexChange 方法。请参阅下面的示例。

    Scaffold(
      bottomNavigationBar: CustomBottomBoxBar(
        inicialIndex: selectedPageIndex,
        onIndexChange: (int index) {
          setState(() {
            selectedPageIndex = index;
          });
        },
        items: [
          CustomBottomBoxBarItem(
              Icons.home_filled,
              Text('Home')),
          CustomBottomBoxBarItem(
              Icons.person,
              Text('Profile')),
        ],
      ),
    );

属性

您可以自定义大多数属性,例如

导航栏高度

您可以通过 height 参数提供导航栏的高度。

选中项框颜色

您可以通过 selectedItemBoxColor 参数提供选中项框的颜色。

未选中项框颜色

您可以通过 unselectedItemBoxColor 参数提供未选中项框的颜色。

选中项颜色

您可以通过 selectedItemColor 参数提供选中项的颜色。

未选中项颜色

您可以通过 unselectedItemColor 参数提供选中项的颜色。

动画时长

您可以通过 duration 参数提供动画时长。

初始索引

您可以通过 inicialIndex 参数提供初始索引。

GitHub

查看 Github