flutter之从零开始搭建（一）之 BottomNavigationBar

}
}
class MainPageState extends State {
int _tabIndex = 0;
var tabImages;
var appBarTitles = [‘首页’, ‘商铺’, ‘消息’, ‘我的’];

/*

• 根据image路径获取图片
• 这个图片的路径需要在 pubspec.yaml 中去定义
  */
  Image getTabImage(path) {
  return new Image.asset(path, width: 20.0, height: 20.0);
  }

/*

• 根据索引获得对应的normal或是press的icon
  /
  Image getTabIcon(int curIndex) {
  if (curIndex == _tabIndex) {
  return tabImages[curIndex][1];
  }
  return tabImages[curIndex][0];
  }
  /
• 获取bottomTab的颜色和文字
  /
  Text getTabTitle(int curIndex) {
  if (curIndex == _tabIndex) {
  return new Text(appBarTitles[curIndex],
  style: new TextStyle(color: const Color(0xff63ca6c)));
  } else {
  return new Text(appBarTitles[curIndex],
  style: new TextStyle(color: const Color(0xff888888)));
  }
  }
  /
• 存储的四个页面，和Fragment一样
  */
  var _bodys;

void initData() {
/*
bottom的按压图片
*/
tabImages = [
[
getTabImage(‘images/ic_home_normal.png’),
getTabImage(‘images/ic_home_press.png’)
],
[
getTabImage(‘images/ic_shop_normal.png’),
getTabImage(‘images/ic_shop_press.png’)
],
[
getTabImage(‘images/ic_msg_normal.png’),
getTabImage(‘images/ic_msg_press.png’)
],
[
getTabImage(‘images/ic_my_normal.png’),
getTabImage(‘images/ic_my_press.png’)
]
];

_bodys = [
new HomePage(),
new ShopPage(),
new MsgPage(),
new MyPage()
];
}

@override
Widget build(BuildContext context) {
initData();
// TODO: implement build
return Scaffold(
appBar: new AppBar(
title: new Text(“主页”),
),
body: _bodys[_tabIndex],
bottomNavigationBar: new BottomNavigationBar(
items: [
new BottomNavigationBarItem(
icon: getTabIcon(0), title: getTabTitle(0)),
new BottomNavigationBarItem(
icon: getTabIcon(1), title: getTabTitle(1)),
new BottomNavigationBarItem(
icon: getTabIcon(2), title: getTabTitle(2)),
new BottomNavigationBarItem(
icon: getTabIcon(3), title: getTabTitle(3)),
],
//设置显示的模式
type: BottomNavigationBarType.fixed,
//设置当前的索引
currentIndex: _tabIndex,
//tabBottom的点击监听
onTap: (index) {
setState(() {
_tabIndex = index;
});
},
),
);
}
}

主界面主要通过bottomNavigationBar定义页面底部的四个tab，body部分主要是通过_tabIndex索引在_bodys中切换页面,这里我定义了四个Page，HomePage、ShopPage、MsgPage、MyPage， 这四个Page都是一样的，就发一个出来看看,其他的雷同

import ‘package:flutter/material.dart’;
class MsgPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: ‘Flutter Demo’,
theme: new ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: new Scaffold(
body: new Center(child:new Text(“消息”)),
),
);
}
}

按照开发Android的思路来看这个布局的话，还是很容易理解的，这里面还要注意的几个点，获取本地资源的图片，是需要在pubspec.yaml中去定义的，定义如下,在assets背后放置图片的路径，那么，这个路径就可 《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》无偿开源 徽信搜索公众号【编程进阶路】 以被Image识别并使用
flutter: