底部导航栏实现Demo

​ 参考地址:https://jspang.com/detailed?id=45#toc28

主入口文件编写

首先我们先写一个主入口文件,这个文件只是简单的APP通用结构,最主要的是要引入自定义的BottomNavigationWidget组件。

main.dart代码如下(视频中会进行详细讲解)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 讲解

在编写BottomNaivgationWidget组件前,我们需要简单了解一下什么是StatefulWidget.

StatefulWidget具有可变状态(state)的窗口组件(widget)。使用这个要根据变化状态,调整State值。

在lib目录下,新建一个bottom_navigation_widget.dart文件。

它的初始化和以前使用的StatelessWidget不同,我们在VSCode中直接使用快捷方式生成代码(直接在VSCode中输入stful):

1
2
3
4
5
6
7
8
9
10
11
12
class name extends StatefulWidget {
_nameState createState() => _nameState();
}

class _nameState extends State<name> {
@override
Widget build(BuildContext context) {
return Container(
child: child,
);
}
}

上面的代码可以清楚的看到,使用StatefulWidget分为两个部分,第一个部分是继承与StatefullWidget,第二个部分是继承于State.其实State部分才是我们的重点,主要的代码都会写在State中。

BottomNaivgationWidget自定义

接下来我们就要创建BottomNaivgationWidget这个Widget了,只是建立一个底部导航。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
import 'package:flutter/material.dart';
class BottomNavigationWidget extends StatefulWidget {
_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(
'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(
'AipPlay',
style:TextStyle(color:_BottomNavigationColor)
)
),
],
type:BottomNavigationBarType.fixed
),
);
}
}

效果已经出现,在APP的页面上已经出现了一个底部导航栏,只不过现在还点击还没有什么效果。

接下来是实现点击效果:

子页面的编写

子页面我们就采用最简单的编写了,只放入一个AppBar和一个Center,然后用Text Widget表明即可。

先来写一个HomeScreen组件,新建一个pages目录,然后在目录下面新建home_screen.dart文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:AppBar(
title: Text('HOME'),
),
body:Center(
child: Text('HOME'),
)
);
}
}

有了这个文件剩下的文件就可以复制粘贴,然后改少量的代码来完成了。

分别建立:

  • email_screen.dart
  • pages_screen.dart
  • airplay_screen.dart

这些都是导航要用的子页面,有了这些页面,我们才能继续编写代码。

重写initState()方法

我们要重新initState()方法,把刚才做好的页面进行初始化到一个Widget数组中。有了数组就可以根据数组的索引来切换不同的页面了。这是现在几乎所有的APP采用的方式。

代码如下:

1
2
3
4
5
6
7
8
9
10
List<Widget> list = List();
@override
void initState(){
list
..add(HomeScreen())
..add(EmailScreen())
..add(PagesScreen())
..add(AirplayScreen());
super.initState();
}

这里的..add()是Dart语言的..语法,如果你学过编程模式,你一定听说过建造者模式,简单来说就是返回调用者本身。这里list后用了..add(),还会返回list,然后就一直使用..语法,能一直想list里增加widget元素。 最后我们调用了一些父类的initState()方法。

BottomNavigationBar里的响应事件

BottomNavigationBar组件里提供了一个相应事件onTap,这个事件自带一个索引值index,通过索引值我们就可以和我们list里的索引值相对应了。

1
2
3
4
5
onTap:(int index){
setState((){
_currentIndex= index;
});
},

现在给出全部的 BottomNavigationBar.dart`的全部代码,讲解我会在视频中一行一行讲解。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import 'package:flutter/material.dart';
import 'pages/home_screen.dart';
import 'pages/email_screen.dart';
import 'pages/pages_screen.dart';
import 'pages/airplay_screen.dart';

class BottomNavigationWidget extends StatefulWidget {
_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(PagesScreen())
..add(AirplayScreen());
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
body: list[_currentIndex],
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(
'AipPlay',
style:TextStyle(color:_BottomNavigationColor)
)
),
],
currentIndex:_currentIndex,
onTap:(int index){
setState((){
_currentIndex= index;
});
},
type:BottomNavigationBarType.fixed
),
);
}
}

最后实现的效果:

1.

2.

再次申明:本文引用https://jspang.com/detailed?id=45#toc28 进行学习。

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×