一个具有盒子动画的自定义底部导航栏。它的灵感来自早期的一些设计,但更简化且令人兴奋。
演示
用法
要使用该软件包,请首先在 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 参数提供初始索引。

