常规底部导航
现在随便打开一个APP 上面都会在屏幕最下方有一排的按钮,点击不同的按钮可以进入不同的界面。就是说在界面的底部会有一排的按钮导航。
效果图如下:
接下来开始撸代码了:1. 首先创建flutter框架 在lib目录下创建Bottom_navigation_widget.dart文件,文件代码如下:
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(
'AirPlay',
style:TextStyle(color:_BottomNavigationColor)
)
),
],
type:BottomNavigationBarType.fixed
),
);
}
}
复制代码
- 在lib\main.dart文件添加相关代码
import 'package:flutter/material.dart';
import 'Bottom_navigation_widget.dart'; //在lib目录下面创建Bottom_navigation_widget.dart文件,并引用
void main()=>runApp(new MyApp());
class MyApp extends StatelessWidget {
final Widget child;
MyApp({Key key, this.child}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '底部导航',
theme: ThemeData(primarySwatch: Colors.yellow,),
home: BottomNavigationWidget(),
);
}
}
复制代码
3.在lib目录下创建pages,并在Bottom_navigation_widget.dart文件中引用
import 'pages/home_screen.dart';
import 'pages/email_screen.dart';
import 'pages/pages_screen.dart';
import 'pages/airplay_screen.dart';
复制代码
- 我们要重新initState()方法,把刚才做好的页面进行初始化到一个Widget数组中。有了数组就可以根据数组的索引来切换不同的页面了。这是现在几乎所有的APP采用的方式。 代码如下:
List<Widget> list = List();
@override
void initState(){
list
..add(HomeScreen())
..add(EmailScreen())
..add(PagesScreen())
..add(AirplayScreen());
super.initState();
}
复制代码
BottomNavigationBar组件里提供了一个相应事件onTap,这个事件自带一个索引值index,通过索引值我们就可以和我们list里的索引值相对应了。
onTap:(int index){
setState((){
_currentIndex= index;
});
},
复制代码
以上就是底部导航的相关代码了,希望对您有所帮助,稍后会陆续更新flutter常用组件。 github:github.com/yuckyb/flut…