Flutter 底部导航——BottomNavigationBar | 掘金技术征文

时间 2019-11-24

标签 flutter 底部导航 bottomnavigationbar 技术征文繁體版

原文原文链接

前言

Google推出flutter这样一个新的高性能跨平台（Android，ios）快速开发框架以后，被业界许多开发者所关注。我在接触了flutter以后发现这个确实是一个好东西，好东西固然要和你们分享，对吧。ios

今天要跟你们分享的是底部导航功能的实现。我认为flutter的就是在传达一种最简设计，一个部件只关注它自己，达到低耦合高内聚。因此本文讲解底部导航将只关注该功能的实现，并对布局思路进行介绍。git

你将学到什么

如何将部件拆分
如何构建flutter布局
如何建立底部导航

首先让你们看看效果。 github

这是一个最简单的底部导航案例，我不但愿引入过多其余东西，把初学者的脑子搞得很乱（这也是我在学习中所遇到的）。

创建布局

第一步：绘制布局视图

将布局分解为基本元素：数组

页面是由哪些元素构成的
哪些控件会由于用户的交互而发生变化，哪些不会

在这个应用中咱们指望可以经过点击底部导航栏就能切换上面的整个页面。这个行为触发了页面的刷新。

这里咱们须要思考一个问题，刷新的范围在哪里？markdown

用过手机app的同窗都知道，咱们能够点击底部导航栏，底部是不会刷新的，而刷新的只有上面部分。因此咱们能够把整个页面拆成两部分。app

第一个部分是橘色框里的页面部分，第二个部分是咱们底部的导航器部分。而导航器是一直不变的，因此导航器应该是在它们之中处于父级widget层次。框架

第二步：开始构造底部导航

class BottomNavigationWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => BottomNavigationWidgetState();
}

class BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  final _bottomNavigationColor = Colors.blue;
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(
                Icons.home,
                color: _bottomNavigationColor,
              ),
              title: Text(
                'HOME',
                style: TextStyle(color: _bottomNavigationColor),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.email,
                color: _bottomNavigationColor,
              ),
              title: Text(
                'Email',
                style: TextStyle(color: _bottomNavigationColor),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.pages,
                color: _bottomNavigationColor,
              ),
              title: Text(
                'PAGES',
                style: TextStyle(color: _bottomNavigationColor),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.airplay,
                color: _bottomNavigationColor,
              ),
              title: Text(
                'AIRPLAY',
                style: TextStyle(color: _bottomNavigationColor),
              )),
        ],
        currentIndex: _currentIndex,
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
} 
复制代码

咱们这里使用了Scaffold布局，它默认提供了一个bottomNavigationBar的属性，咱们在这里给它一个BottomNavigationBar,并在这个BottomNavigationBar中放了四个BottomNavigationBarItem（一下简称item）。每一个item就是底部的一个导航按钮。ide

BottomNavigationBar的items是一个数组，那么就会存在下标。BottomNavigationBar为咱们提供了一个currentIndex属性，默认是0,咱们进去看看这个方法。布局

/// The index into [items] of the current active item.
  final int currentIndex;
复制代码

currentIndex表明了当前再items中被选中的index。post

BottomNavigationBar还提供了一个onTap方法。咱们再看看这个方法。

/// The callback that is called when a item is tapped.
  /// The widget creating the bottom navigation bar needs to keep track of the
  /// current index and call `setState` to rebuild it with the newly provided
  /// index.
  final ValueChanged<int> onTap;
复制代码

当底部导航的一个item被点击时，它会调用此方法，并传入当前item的index值，这样就能改变焦点到当前的index上的item了。

咱们来看看效果：

建立切换页面

而后咱们须要分别建立四个页面，对映四个item，因为四个页面极为类似这里只放一个。建议你们对这四个页面分别建立一个dart文件。

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => HomeScreenState();
}

class HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HOME'),
      ),
    );
  }
}
复制代码

每一个页面都是一个Scaffold布局，有一个appBar。

将页面显示在界面上

咱们再回到底部导航这个控件中。因为咱们是经过currentIndex这个变量来控制跳转的，页面要想同步也必须依赖于这个变量。这里咱们使用一个List来与items对应。

List<Widget> pages = List<Widget>();
  final _bottomNavigationBarItemColor = Colors.teal;
  int _currentIndex = 0;

  @override
  void initState() {
    pages
      ..add(HomeScreen())
      ..add(EmailScreen())
      ..add(AlarmsScreen())
      ..add(ProfileScreen());
  }
复制代码

而后让咱们的BottomNavigation的Scaffold布局中body部分为List中的页面。

body: pages[_bottomNavigationIndex],
复制代码

咱们让_currentIndex来控制咱们到底再body这个位置上显示哪一个页面。这样就可以经过Tap咱们的bottomNavigationItem来达到控制页面跳转的做用啦。