Android-Flutter-BottomNavigationBar：该如何优雅实现底部导航栏？

Flutter 作为Google出品的一个新兴的跨平台移动客户端UI开发框架，正在被越来越多的开发者和组织使用，包括阿里的咸鱼、腾讯的微信等。

作者：Carson_Ho
链接：https://www.jianshu.com/p/81dcfcc9e5da

今天，我主要讲解Flutter中布局方面的底部导航栏：BottomNavigationBar，希望你们会喜欢。

---

目录

---

1. 简介

底部导航栏控件，属于 Scaffold 组件。

配合使用 BottomNavigationBarItem ：底部导航栏要显示的Item = 图标 + 标题

---

2. 属性介绍

BottomNavigationBar({
Key key,
@required this.items, // 底部导航栏的显示项 = BottomNavigationBarItem类型的List
this.onTap, // 点击导航栏子项时的回调 = ValueChanged < int >
this.currentIndex = 0, // 当前显示项的下标 = int
BottomNavigationBarType type, // 底部导航栏的类型，有fixed和shifting两个类型，显示效果不一样 = BottomNavigationBarType
this.fixedColor, // 底部导航栏type为fixed时导航栏的颜色，如果为空的话默认使用ThemeData.primaryColor = Color
this.iconSize = 24.0, // BottomNavigationBarItem icon的大小 = double
})

const BottomNavigationBarItem({
@required this.icon, // 要显示的图标控件，一般是Iocn
this.title, // 要显示的标题控件，一般是Text
Widget activeIcon, // 选中时要显示的icon，一般是Icon
this.backgroundColor, // BottomNavigationBarType为shifting时的背景颜色
})

---

3. 使用步骤

// 需要在Scaffold内部使用
Scaffold(
appBar: AppBar(
title: Text(“底部导航栏”),
),
bottomNavigationBar: BottomNavigationBar(
items: bottomNavItems, // 导航栏下标item
currentIndex: currentIndex, // 当前下标
type: BottomNavigationBarType.fixed, // 点击导航栏样式
fixedColor: Colors.green, // 点击icon颜色
iconSize: 15, // icon大小
onTap: (index) {
_changePage(index); // 点击回调
},
),
body: pages[currentIndex], // 每个item的回调页面
);

// 回调页面
void _changePage(int index) {
// 若点击的导航项不是当前项，则切换
if (index != currentIndex) {
setState(() {
currentIndex = index;
});
}
}

---

4. 实例讲解

4.1 设置要回调的页面

为了方便显示，仅显示一个文本

// 页面1
import ‘package:flutter/material.dart’;

class PageA extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text(“PageA”),
);
}
}

// 页面2
import ‘package:flutter/material.dart’;

class PageB extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text(“PageB”),
);
}
}

// 页面3
import ‘package:flutter/material.dart’;

class PageC extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text(“PageC”),
);
}
}

// 页面4
import ‘package:flutter/material.dart’;

class PageD extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text(“PageD”),
);
}
}

4.2 核心代码

main.dart

/**

• 导入库
  **/
  import ‘package:flutter/material.dart’;

import ‘PageA.dart’;
import ‘PageB.dart’;
import ‘PageC.dart’;
import ‘PageD.dart’; // Material UI组件库

void main() => runApp(MyApp());

// 无状态控件显示
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 主界面入口返回的组件 = MaterialApp
return MaterialApp(
title: ‘Widget_Demo’, //标题
theme: ThemeData(primarySwatch: Colors.blue), //主题色
home: MyWidget(), // 返回一个Widget对象，用来定义当前应用打开的时候，所显示的界面
);
}
}

class MyWidget extends StatefulWidget {
@override
State createState() {
return new _MyWidgetState();
}
}

class _MyWidgetState extends State {

// 导航栏的item
final List 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(“个人中心”),
),
];

int currentIndex; // 当前下标

final pages = [PageA(), PageB(), PageC(), PageD()];// 下标对应显示的界面

@override
void initState() {
super.initState();
currentIndex = 0;
}
con(Icons.person),
title: Text(“个人中心”),
),
];

int currentIndex; // 当前下标

final pages = [PageA(), PageB(), PageC(), PageD()];// 下标对应显示的界面

@override
void initState() {
super.initState();
currentIndex = 0;
}