Flutter 底部导航——BottomNavigationBar

开发者训练营官方

发布于 2021-1-12 14:58

浏览

0收藏

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

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

你将学到什么
如何将部件拆分
如何构建flutter布局
如何创建底部导航
首先让大家看看效果。

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

建立布局
第一步：绘制布局视图
将布局分解为基本元素：

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

在这个应用中我们期望能够通过点击底部导航栏就能切换上面的整个页面。这个行为触发了页面的刷新。

这里我们需要思考一个问题，刷新的范围在哪里？

用过手机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就是底部的一个导航按钮。

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

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

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

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<Widget>来与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中的页面。