BottomNavigationBar

  • Material Design风格的底部导航栏。

    1. BottomNavigationBar({
    2. // 键
    3. Key key,
    4. // 底部导航栏的图标及文字样式,此处可以单独设置图标选中及未选中时的图标颜色及大小(此处设置的属性有限级最高,有限采用此处属性)
    5. @required this.items,
    6. // 底部导航栏的图标点击事件函数(默认会传入当前点击的按钮索引位置)
    7. this.onTap,
    8. // 当前选中按钮的索引
    9. this.currentIndex = 0,
    10. // 底部导航栏海拔高度,和投影范围及颜色深度有关(值为0时无投影,值越大投影范围越大且颜色越浅)
    11. this.elevation = 8.0,
    12. // 底部导航栏类型,一共两种fixed(图标固定大小)和shifting(选中图标有突出变大的动画,且可设置飞溅变换底部导航栏背景颜色)
    13. BottomNavigationBarType type,
    14. // 选中图标及文字的颜色，只能指定fixedColor和selectedItemColor之一,后者是首选,fixedColor仅为了向后兼容而存在
    15. Color fixedColor,
    16. // 底部导航栏的背景颜色,当type为shifting时,可以设置BottomNavigationBarItem.backgroudColor,选中后该颜色会飞溅覆盖导航栏的背景颜色
    17. this.backgroundColor,
    18. // 统一设置图标的大小(单独设置过图标大小的,不会受此属性影响)
    19. this.iconSize = 24.0,
    20. // 统一设置图标及文字选中的颜色(单独设置过选中的文字颜色及图标颜色,不会受此属性影响)
    21. Color selectedItemColor,
    22. // 统一设置图标及文字未选中颜色(单独设置过未选中文字颜色及图标颜色,不会受此属性影响)
    23. this.unselectedItemColor,
    24. // 统一设置选中的图标样式,含图标大小、透明度、颜色
    25. this.selectedIconTheme = const IconThemeData(),
    26. // 统一设置未选中图标样式,含图标大小、透明度、颜色
    27. this.unselectedIconTheme = const IconThemeData(),
    28. // 统一设置选择标签的文字大小
    29. this.selectedFontSize = 14.0,
    30. // 统一设置未选中标签文字大小
    31. this.unselectedFontSize = 12.0,
    32. // 统一设置选中的标签文字的样式,如颜色、大小、样式
    33. this.selectedLabelStyle,
    34. // 统一设置未选中标签文字的样式,如颜色、大小、样式
    35. this.unselectedLabelStyle,
    36. // 设置选中的标签文字是否显示
    37. this.showSelectedLabels = true,
    38. // 设置未选中标签文字是否显示
    39. bool showUnselectedLabels,
    40. })

  • unselectedLabelStyle和showSelectedLabels属性差异比对

image.pngimage.png
两个值均被false时效果 两个值均被true时效果

  • type属性差异比对

颜色飞溅.gif普通切换.gif
type值为BottomNavigationBarType.shifting type值为BottomNavigationBarType.fixed

  • BottomNavigationBar.items概述
  1. BottomNavigationBarItem({
  2.   // 未选中导航栏按钮图标,可为Icon或ImageIcon类型,可以单独设置图标的颜色及大小
  3.   @required this.icon,
  4.   // 导航栏按钮标签文字,不管你要不要显示,必须设置否则报错给你看
  5.   this.title,
  6.   // 选中时导航栏按钮图标,可为Icon或ImageIcon类型,可以单独设置图标的颜色及大小
  7.   Widget activeIcon,
  8.   // BottomNavigationBar.type为shifting时有效,该颜色会在选中该按钮时以飞溅的效果覆盖导航栏原有背景色
  9.   this.backgroundColor,
  10. })

BottomAppBar

  • 通常与Scaffold.bottomNavigationBar一起使用，其有别于BottomNavigationBar。主要区在于Scaffold中使用FloatingActionButton，FloatingActionButton与底部导航栏重叠，使用后BottomanAppBar会有打孔的效果，而使用BottomNavigationBar则只是一般的重叠效果。对于实现底部导航栏需要的代码量而言，BottomanAppBar方式实现需要代码量要比BottomNavigationBar的方式要多很多，但是其可自定义性相对较高一些。

    1. BottomAppBar({
    2. // 键
    3. Key key,
    4. // 颜色
    5. this.color,
    6. // 底部导航栏海拔高度,和投影范围及颜色深度有关(值为0时无投影,值越大投影范围越大且颜色越浅)
    7. this.elevation,
    8. // BottomAppBar形状
    9. this.shape,
    10. // 
    11. this.clipBehavior = Clip.none,
    12. // 缺口边距
    13. this.notchMargin = 4.0,
    14. // 缺口边距
    15. this.child,
    16. })

  • BottomAppBar与BottomNavigationBar实现效果差异比对

image.pngimage.png
BottomAppBar实现的打孔效果 BottomNavigationBar实现的重叠效果

CupertinoTabBar

IOS中Cupertino设置风格的底部导航栏