Flutter导航栏实现

学了几天的flutter,似乎有点感觉了,今天来上手搞一个导航栏,实现类似android里面的ViewPager+Fragment的效果;

二话不说直接上代码;

import 'package:flutter/material.dart';
import 'package:mou/navigationbar/ActPage.dart';
import 'package:mou/navigationbar/HomePage.dart';
import 'package:mou/navigationbar/PersonPage.dart';
class NavigationPage extends StatefulWidget {
@override
State createState() {
return new NavigationState();
}
}
class NavigationState extends State
with TickerProviderStateMixin {
List pageData;
//当前页面
int currentPosition = 0;
// 两种动画类型
BottomNavigationBarType animType = BottomNavigationBarType.fixed;
@override
Widget build(BuildContext context) {
final BottomNavigationBar botNavBar = new BottomNavigationBar(
items: [
new BottomNavigationBarItem(
icon: new Icon(
Icons.home,
color: currentPosition == 0 ? Colors.green : Colors.black87,),
title: new Text(
"主页",
style: new TextStyle(
color: currentPosition == 0 ? Colors.green : Colors.black87,
),
),
),
new BottomNavigationBarItem(
icon: new Icon(
Icons.local_activity,
color: currentPosition == 1 ? Colors.green : Colors.black87,),
title: new Text("活动",
style: new TextStyle(
color: currentPosition == 1 ? Colors.green : Colors.black87,
),
),
),
new BottomNavigationBarItem(
icon: new Icon(
Icons.person,
color: currentPosition == 2 ? Colors.green : Colors.black87,),
title: new Text(
"个人中心",
style: new TextStyle(
color: currentPosition == 2 ? Colors.green : Colors.black87,
),
),
),
],
currentIndex: currentPosition,
type: animType,
onTap: (index) {
setState(() {
currentPosition = index;
});
}
);
return new Scaffold(
appBar: new AppBar(
title: new Text("navigationBar"),
),
body: pageData[currentPosition],
bottomNavigationBar: botNavBar,
);
}
@override
void initState() {
super.initState();
pageData = new List();
pageData..add(HomePage())..add(ActPage())..add(PersonalPage());
}
}


Scaffold里面就可以设置navigationBar传入一个BottomNavigationBar 即可

这个navigationbar的动画有两种,默认就是有动画的;

下面是三个widget,类似android里面的三个fragment,只贴一个,意思差不多

import 'package:flutter/material.dart';
class HomePage extends StatefulWidget{
@override
State createState() {
return new HomeState();
}
}
class HomeState extends State{
@override
Widget build(BuildContext context) {
return new Container(
child: new Center(
child: new Text("主页",
style: new TextStyle(
fontSize: 26.0,
color: Colors.green
),
),
),
);
}
}


最后看下效果;