GitHub地址：https://github.com/BBNO/flutter_bottom_navigation
效果预览：
底部导航栏.jpg
主入口文件
首先写一个主入口文件，这个文件只是简单的APP通用结构，最主要的是要引入自定义的BottomNavigationWidget组件。
main.dart代码如下
import 'package:flutter/material.dart';
import 'bottom_navigation_widget.dart';
void main()=>runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter bottomNavigationBar',
theme: ThemeData.light(),//主题
home: BottomNavigationWidget(),
);
}
}
需要注意的是BottomNaivgationWidget这个组件还没有编写，所以现在会报错。
StatefulWidget
什么是StatefulWidget
StatefulWidget是具有可变状态(state)的窗口组件（widget），使用这个要根据变化状态，调整State值。
在lib目录下，新建一个bottom_navigation_widget.dart文件。
直接使用快捷方式生成代码（直接输入stful，联想出对应的快捷代码）：
class extends StatefulWidget {
@override
_State createState() => _State();
}
class _State extends State<> {
@override
Widget build(BuildContext context) {
return Container();
}
}
使用快捷方式生成的代码是没有组件name的，需要自行设置。使用StatefulWidget分为两个部分，第一个部分是继承于StatefullWidget，第二个部分是继承于State，其实State部分才是我们的重点，主要的代码都会写在State中。
BottomNaivgationWidget自定义
接下来我们就要创建BottomNaivgationWidget，建立一个底部导航。
import 'package:flutter/material.dart';
class BottomNavigationWidget extends StatefulWidget {
@override
_BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
}
class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
final _BottomNavigationColor = Colors.blue;//组件内部私有变量
@override
Widget build(BuildContext context) {
return Scaffold( //脚手架
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(//导航栏子按钮
icon: Icon(
Icons.home,
color: _BottomNavigationColor,
),
title: Text(
'首页',
style: TextStyle(color: _BottomNavigationColor),
)),
BottomNavigationBarItem(
icon: Icon(
Icons.email,
color: _BottomNavigationColor,
),
title: Text(
'邮箱',
style: TextStyle(color: _BottomNavigationColor),
)),
BottomNavigationBarItem(
icon: Icon(
Icons.airplay,
color: _BottomNavigationColor,
),
title: Text(
'播放器',
style: TextStyle(color: _BottomNavigationColor),
)),
BottomNavigationBarItem(
icon: Icon(
Icons.person,
color: _BottomNavigationColor,
),
title: Text(
'我的',
style: TextStyle(color: _BottomNavigationColor),
)),
],
type: BottomNavigationBarType.fixed,//导航栏类型
),
);
}
}
这时候我们就可以把项目跑起来来进行查看效果，效果已经出现，在APP的页面上已经出现了一个底部导航栏，只不过现在还点击还没有什么效果。
子页面
接下来我们再写一个简单的子页面，只放入一个AppBar和一个Center，然后用Text Widget表明即可。
先来写一个HomeScreen组件，新建一个pages目录，然后在目录下面新建home_screen.dart文件。
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('首页'),
),
body: Center(
child: Text('首页'),
),
);
}
}
有了这个文件剩下的文件就可以复制粘贴，然后改少量的代码来完成了。
分别建立:
email_screen.dart
pages_screen.dart
airplay_screen.dart
这些都是导航要用的子页面，有了这些页面，我们才能继续编写代码。
重写initState()方法
我们要重新initState()方法，把刚才做好的页面进行初始化到一个Widget数组中。有了数组就可以根据数组的索引来切换不同的页面了。这是现在几乎所有的APP采用的方式。
代码如下:
List<Widget> list = List();
@override
void initState() {
list
..add(HomeScreen())
..add(EmailScreen())
..add(AirplayScreen())
..add(PersonScreen());
super.initState(); //无名无参需要调用
}
这里的..add()是Dart语言的..语法，如果你学过编程模式，你一定听说过建造者模式，简单来说就是返回调用者本身。这里list后用了..add()，还会返回list，然后就一直使用..语法，能一直想list里增加widget元素。 最后我们调用了一些父类的initState()方法。
BottomNavigationBar里的响应事件
BottomNavigationBar组件里提供了一个相应事件onTap，这个事件自带一个索引值index，通过索引值我们就可以和我们list里的索引值相对应了。
onTap: (int index) {
setState(() {
_currentIndex = index;
});
},
bottom_navigation_widget.dart的完整代码：
import 'package:flutter/material.dart';
import 'pages/home_screen.dart';
import 'pages/email_screen.dart';
import 'pages/airplay_screen.dart';
import 'pages/person_screen.dart';
class BottomNavigationWidget extends StatefulWidget {
@override
_BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
}
class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
final _BottomNavigationColor = Colors.blue;
int _currentIndex = 0;
List<Widget> list = List();
@override
void initState() {
list
..add(HomeScreen())
..add(EmailScreen())
..add(AirplayScreen())
..add(PersonScreen());
super.initState(); //无名无参需要调用
}
@override
Widget build(BuildContext context) {
return Scaffold(
//脚手架
body: list[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
color: _BottomNavigationColor,
),
title: Text(
'首页',
style: TextStyle(color: _BottomNavigationColor),
)),
BottomNavigationBarItem(
icon: Icon(
Icons.email,
color: _BottomNavigationColor,
),
title: Text(
'邮箱',
style: TextStyle(color: _BottomNavigationColor),
)),
BottomNavigationBarItem(
icon: Icon(
Icons.airplay,
color: _BottomNavigationColor,
),
title: Text(
'播放器',
style: TextStyle(color: _BottomNavigationColor),
)),
BottomNavigationBarItem(
icon: Icon(
Icons.person,
color: _BottomNavigationColor,
),
title: Text(
'我的',
style: TextStyle(color: _BottomNavigationColor),
)),
],
type: BottomNavigationBarType.fixed,
currentIndex: _currentIndex,
onTap: (int index) {
setState(() {
_currentIndex = index;
});
},
),
);
}
}
网友评论