本项目借用 逛丢 网站的部分数据,仅作为 flutter 开发学习之用。 逛丢官方网址:https://guangdiu.com/
flutter 项目实战三 json数据解析以及Gson格式化flutter 项目实战二 网络请求
flutter 项目实战五 item 点击跳转,webview加载
flutter 项目实战七 bottomNavigationBar
侧边栏的问题已经解决了,接下到底部的导航栏了,先放上kotlin开发的主页面
如底部红线框框中的部分,在Android或者kotlin中我们可以使用 BottomNavigationView (android.support.design.widget包下面)来实现,也可使用 RadioGroup 来实现,在 flutter 中我们使用 bottomNavigationBar 来实现效果。
为了导航效果,我们先新建两个页面,hai_tao.dart 和 hour_rank.dart ,
class HaiTao extends StatefulWidget{
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return HaitaoWidget();
}
}
class HaitaoWidget extends State<HaiTao>{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("海淘"),
),
body: Text("海淘"),
);
}
}
class HourRank extends StatefulWidget{
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return HourWidget();
}
}
class HourWidget extends State<HourRank>{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("小时风云榜"),
),
body: Text("小时风云榜"),
);
}
}
修改main.dart代码,添加 bottomNavigationBar
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Main(),
);
}
}
class Main extends StatefulWidget{
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return MainWidget();
}
}
class MainWidget extends State<Main>{
int _index=0;
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: HomeIndex(),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home,color: Colors.grey,),
title: Text("首页"),
activeIcon: Icon(Icons.home,color: Colors.green,),
),
BottomNavigationBarItem(
icon: Icon(Icons.flight_takeoff,color: Colors.grey,),
title: Text("首页"),
activeIcon: Icon(Icons.flight_takeoff,color: Colors.green,),
),
BottomNavigationBarItem(
icon: Icon(Icons.timer,color: Colors.grey,),
title: Text("小时风云榜"),
activeIcon: Icon(Icons.timer,color: Colors.green,),
),
],
currentIndex: _index,
onTap: (index){
setState(() {
_index=index;
});
},
),
);
}
}
BottomNavigationBarItem是 BottomNavigationBar的组成部分,类似于 radiobuttom 与 radiogroup 。icon 是 BottomNavigationBarItem的图片部分,activeIcon 是选中之后的图片样式,可以不设置,currentIndex 表示当前展示的序号,onTap是 BottomNavigationBarItem 点击时触发的方法,参数为点击的序号。
底部item切换好了,下面就到了页面切换了,需要根据 item选中状态的变化,切换上部的内容。
flutter 提供了 名为 indexStack 的widget 来实现,children 包含了一共有几个页面,index 用了控制当前展示页面时第几个页面。
IndexedStack(
children: <Widget>[
HomeIndex(),
HaiTao(),
HourRank()
],
index: _index,)
修改main.dart的build方法:
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: IndexedStack(
children: <Widget>[
HomeIndex(),
HaiTao(),
HourRank()
],
index: _index,
),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home,color: Colors.grey,),
title: Text("首页",style: TextStyle(color: _index==0?Colors.green:Colors.grey),),
activeIcon: Icon(Icons.home,color: Colors.green,),
),
BottomNavigationBarItem(
icon: Icon(Icons.flight_takeoff,color: Colors.grey,),
title: Text("海淘",style: TextStyle(color: _index==1?Colors.green:Colors.grey),),
activeIcon: Icon(Icons.flight_takeoff,color: Colors.green,),
),
BottomNavigationBarItem(
icon: Icon(Icons.timer,color: Colors.grey,),
title: Text("小时风云榜",style: TextStyle(color: _index==2?Colors.green:Colors.grey),),
activeIcon: Icon(Icons.timer,color: Colors.green,),
),
],
currentIndex: _index,
onTap: (index){
setState(() {
_index=index;
});
},
),
);
}
可以对 bottomNavigationBarItem 的 title设置
style: TextStyle(color: _index==0?Colors.green:Colors.grey)
来改变选中的item的文字的颜色
运行程序:
bottomNavigationBar 至此已基本完成。
目前项目里面还剩下的就是海淘页面以及小时风云榜了,至于九块九的页面是用webview加载的HTML页面,就不再做过多的详述了。
不多在首页当中我们还剩下一个下拉刷新以及上拉加载的功能未实现,将在下一章给出。
码云 git 下载
kotlin版本的源码下载:git下载地址