关于ios:Flutter-31Flutter进阶教程底部导航栏BottomNavigationBar使用

作者 | 弗拉德
起源 | 弗拉德（公众号：fulade_me)

BottomNavigationBar 和 BottomNavigationBarItem 配合来独特展现 Flutter 外面的底部状态栏，底部状态栏是在挪动端很重要的控件。

先看一下 BottomNavigationBar构造方法


BottomNavigationBar({
    // key
    Key key,
    /// BottomNavigationBarItem 数组
    @required this.items,
    /// 点击事件办法
    this.onTap,
    /// 以后选中的 元素下标
    this.currentIndex = 0,
    ///  底部导航栏的 Z 坐标
    this.elevation,
    /// 默认是 BottomNavigationBarType.shifting 个别咱们应用 BottomNavigationBarType.fixed
    this.type,
    /// 选中我的项目色彩的值
    Color fixedColor,
    /// 背景色彩
    this.backgroundColor,
    /// BottomNavigationBarItem 图标的大小
    this.iconSize = 24.0,
    /// 选中时图标和文字的色彩
    Color selectedItemColor,
    /// 未选中时图标和文字的色彩
    this.unselectedItemColor,
    // 选中时的子 Item 的款式
    this.selectedIconTheme,
    /// 未选中时的子 Item 的款式
    this.unselectedIconTheme,
    // 选中时字体大小
    this.selectedFontSize = 14.0,
    /// 未选中时的字体大小
    this.unselectedFontSize = 12.0,
    /// 选中的时候的字体款式
    this.selectedLabelStyle,
    /// 未选中时的字体款式
    this.unselectedLabelStyle,
    /// 是否为未抉择的 BottomNavigationBarItem 显示标签
    this.showSelectedLabels = true,
    //// 是否为选定的 BottomNavigationBarItem 显示标签
    this.showUnselectedLabels,
    /// pc 端或 web 端应用
    this.mouseCursor,
})

咱们来做一个点击底部状态栏按钮切换色彩的 Demo

class _BottomNavigationBarDemoPageState
    extends State<BottomNavigationBarDemoPage> {
  int selectedIndex = 0;
  List<Container> containerList = [
    Container(color: Colors.red,),
    Container(color: Colors.blue,),
    Container(color: Colors.yellow,),
    Container(color: Colors.green,)
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("BottomNavigationBarDemo"),
        backgroundColor: Colors.blue,
      ),
      body: containerList[selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        /// 这个很重要
        type: BottomNavigationBarType.fixed,
        currentIndex: selectedIndex,
        onTap: (index) {setState(() {selectedIndex = index;});
        },
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(title: Text('F1'),
            icon: Icon(Icons.home),
          ),
          BottomNavigationBarItem(title: Text('F2'),
            icon: Icon(Icons.book),
          ),
          BottomNavigationBarItem(title: Text('F3'),
            icon: Icon(Icons.school),
          ),
          BottomNavigationBarItem(title: Text('F4'),
            icon: Icon(Icons.perm_identity),
          ),
        ],
      ),
    );
  }
}

Scaffold接管一个 BottomNavigationBar 作为 bottomNavigationBar 的参数，而后 BottomNavigationBar 接管一个 items 的数组，这个数组外面传入了 4 个 BottomNavigationBarItem 对象别离命名为F1、F2、F3、F4
type参数传入的是 BottomNavigationBarType.fixed，默认是BottomNavigationBarType.shifting，默认的成果是只有在选中BottomNavigationBarItem 时才会显示文字。设置成 BottomNavigationBarType.fixed 非选中状态下也会显示文字和图标
onTap实现的是一个办法，参数是被点击的以后 BottomNavigationBarItem 的下标，在这里被点击后调用 setState 来刷新页面的色彩

成果如下：

日常开发中以上成果根本能满足大多数需要
如果想要自定义上面 Icon 的款式，能够应用 BottomAppBar

这里也介绍两个不错的库

tab_bar_animation
链接: https://github.com/tunitowen/…
成果如下：

simpleanimations
链接: https://github.com/TechieBlos…
成果如下：

想体验以上的示例的运行成果，能够到我的 Github 仓库我的项目 flutter_app->lib->routes->bottom_navigation_page.dart 查看，并且能够下载下来运行并体验。