底部导航栏制作
现在大多数的app都会有底部导航这个功能,所以今天做一个底部导航栏这个功能,因为我之前是做移动端iOS开发,我会结合iOS对底部导航栏的开发进行Flutter的底部导航栏开发。
思路
一个MyApp的MaterialApp载体中放入一个BottomNavigationWidget组件,BottomNavigationWidget组件中放入你想要导航切换的几个界面,然后把界面放在数组中,根据BottomNavigationWidget的Scaffold组件中的BottomNavigationBar组件进行切换index,从数组中根据index去除相应的界面展示上,这里的BottomNavigationWidget组件是继承StatefulWidget,因为中间有状态的更新
分为三个步骤:
- 步骤一:
在我们的Main.dart文件中去创建我们的应用程序入口:
我取名字为MyApp
import 'package:flutter/material.dart';
import 'bottom_navigation_widget.dart';
void main() => runApp(Myapp());
class Myapp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'flutter Bottom Navigate Bar',
theme: ThemeData.light(),
home: BottomNavigationWidget(),
);
}
}
- 步骤二:
import 'package:flutter/material.dart';
import 'pages/AirPlay_screen.dart';
import 'pages/Email_screen.dart';
import 'pages/home_screen.dart';
import 'pages/Pages_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(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(
'Airplay',
style: TextStyle(color: _bottomNavigationColor),
)),
],
currentIndex: _currentIndex,
onTap: (int index) {
// 更新状态
setState(() {
_currentIndex = index;
});
},
),
);
}
}
- 步骤三:
import ‘pages/AirPlay_screen.dart’;
import ‘pages/Email_screen.dart’;
import ‘pages/home_screen.dart’;
import ‘pages/Pages_screen.dart’;
这个四个分别是四个界面我拿一个举例子:
import 'package:flutter/material.dart';
class EmailScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('EmailScreen'),),
body: Center(
child: Text('Email'),
),
);
}
}
这样就会达到下面的效果: