BottomNavigationBar

BottomNavigationBar

首先，bottomNavigationBar 是属于 Scaffold 中的一个位于底部的控件。通常和 BottomNavigationBarItem 配合使用

BottomNavigationBar构造方法

 BottomNavigationBar({
    Key key,
    @required this.items,  
    this.onTap,
    this.currentIndex = 0,
    BottomNavigationBarType type,
    this.fixedColor,
    this.iconSize = 24.0,
  })
123456789

属性	值类型	说明
items	BottomNavigationBarItem类型的List	底部导航栏的显示项
onTap	ValueChanged < int >	点击导航栏子项时的回调
currentIndex	int	当前显示项的下标
type	BottomNavigationBarType	底部导航栏的类型，有fixed和shifting两个类型，显示效果不一样
fixedColor	Color	底部导航栏type为fixed时导航栏的颜色，如果为空的话默认使用ThemeData.primaryColor
iconSize	double	BottomNavigationBarItem icon的大小

BottomNavigationBar中属性比较简单，下面我们来看一下BottomNavigationBarItem

BottomNavigationBarItem

底部导航栏要显示的Item，有图标和标题组成

构造方法：

  const BottomNavigationBarItem({
    @required this.icon,
    this.title,
    Widget activeIcon,
    this.backgroundColor,
  })
123456

属性	值类型	说明
icon	Widget	要显示的图标控件，一般都是Iocn
title	Widget	要显示的标题控件，一般都是Text
activeIcon	Widget	选中时要显示的icon，一般也是Icon
backgroundColor	Color	BottomNavigationBarType为shifting时的背景颜色

简单使用

一般来说，点击底部导航栏都是要进行页面切换或者更新数据的，我们需要动态的改变一些状态，所以，我们要继承自StatefulWidget

class IndexPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _IndexState();
  }
}
123456

首先，我们需要准备导航栏要显示的项：

final List<BottomNavigationBarItem> bottomNavItems = [
    BottomNavigationBarItem(
      backgroundColor: Colors.blue,
      icon: Icon(Icons.home),
      title: Text("首页"),
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.green,
      icon: Icon(Icons.message),
      title: Text("消息"),
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.amber,
      icon: Icon(Icons.shopping_cart),
      title: Text("购物车"),
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.red,
      icon: Icon(Icons.person),
      title: Text("个人中心"),
    ),
  ];
12345678910111213141516171819202122

以及点击导航项是要显示的页面：

 final pages = [HomePage(), MsgPage(), CartPage(), PersonPage()];
1

由于是演示，页面很简单，都是只放一个Text

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("首页"),
    );
  }
}

1234567891011

这些都准备完毕后，我们就可以开始使用底部导航栏了，首先我们要在Scaffold中使用bottomNavigationBar，然后指定items，currentIndex，type（默认是fixed）、onTap等属性

Scaffold(
      appBar: AppBar(
        title: Text("底部导航栏"),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: bottomNavItems,
        currentIndex: currentIndex,
        type: BottomNavigationBarType.shifting,
        onTap: (index) {
          _changePage(index);
        },
      ),
      body: pages[currentIndex],
    );
  }
123456789101112131415

这里我们主要看一下onTap，该属性接收一个方法回调，其中，index表示当前点击导航项的下标，也就是items的下标。
知道下标后，我们只需要更改currentIndex即可。

下面我们来看一下_changePage方法：

  /*切换页面*/
  void _changePage(int index) {
    /*如果点击的导航项不是当前项  切换 */
    if (index != currentIndex) {
      setState(() {
        currentIndex = index;
      });
    }
  }
123456789

如此一来，我们就实现了点击底部导航项切换页面的效果了，非常简单。
全部代码：

import 'package:flutter/material.dart';
import 'setting.dart';
import 'xiangqing.dart';
import 'home.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List _pageList = [
    homePage(),
    xiangqingPage(),
    settingPage(),
  ];

  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.orange,
      body: this._pageList[this._currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (int index) {
          setState(() {
            this._currentIndex = index;
            print(index);
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('首页'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.today),
            title: Text('详情'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            title: Text('设置'),
          ),
        ],
      ),
    );
  }
}