Flutter 项目实战 01 用BottomNavigationBar自定义底部导航栏

第一次写博客，我也不知道会不会被打。

先上效果图

首先，我们先来看一下代码
import ‘dart:math’;

import ‘package:flutter/material.dart’;
import ‘package:flutter/rendering.dart’;
import ‘package:te_guide/pages/financial/Financial.dart’;
import ‘package:te_guide/pages/groups/Groups.dart’;
import ‘package:te_guide/pages/home/Home.dart’;
import ‘package:te_guide/pages/merchants/Merchants.dart’;
import ‘package:te_guide/pages/personal/Personal.dart’;

class Tabs extends StatefulWidget {
final index;

Tabs({Key key, this.index = 0}) : super(key: key);

@override
_TabsState createState() => _TabsState(this.index);
}

class _TabsState extends State {
var _tabImages;
var _tabTitle;
var _pageList;

// 当前显示页面的下标
int _currentIndex;

_TabsState(index) {
this._currentIndex = index;
}

/*

• 根据选择获得对应的noimal或是press的图片
  */
  Image getTabIcon(int curIndex) {
  if (this._currentIndex == curIndex) {
  return this._tabImages[curIndex][1];
  } else {
  return this._tabImages[curIndex][0];
  }
  }

/*

• 根据image路径获取图片
  */
  Image getTabImage(path) {
  return Image.asset(
  path,
  width: 20.0,
  height: 20.0,
  );
  }

/*

• 获取bottomTab 的文字和颜色
  */
  Text getTabTitle(int curIndex) {
  if (this._currentIndex == curIndex) {
  return new Text(
  _tabTitle[curIndex],
  style: new TextStyle(
  fontSize: 10.0, color: Color.fromRGBO(54, 162, 245, 54)
  // Color.fromARGB(1, 162, 245, 54),
  ),
  );
  } else {
  return new Text(
  _tabTitle[curIndex],
  style: new TextStyle(
  fontSize: 10.0,
  color: Color.fromRGBO(110, 118, 134, 1),
  ),
  );
  }
  }

void initData() {
// 初始化子界面
_pageList = [
HomePage(),
FinancialPage(),
GroupsPage(),
MerchantsPage(),
PersonalPage(),
];
// 初始化tab title
_tabTitle = [
‘首页’,
‘财务’,
‘团组’,
‘商户’,
‘我’,
];
// 初始化tab 图片
_tabImages = [
[
getTabImage(‘images/home_page.png’),
getTabImage(‘images/home_page_sd.png’)
],
[
getTabImage(‘images/money_page.png’),
getTabImage(‘images/money_page_sd.png’)
],
[
getTabImage(‘images/teamn_page.png’),
getTabImage(‘images/teamn_page_sd.png’)
],
[
getTabImage(‘images/shopping_page.png’),
getTabImage(‘images/shopping_page_sd.png’)
],
[getTabImage(‘images/my_page.png’), getTabImage(‘images/my_page_sd.png’)]
];
}

@override
Widget build(BuildContext context) {
initData();
return Scaffold(
appBar: AppBar(
title: Text(‘我是测试’),
),
body: this._pageList[this._currentIndex],
bottomNavigationBar: new BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: this._currentIndex,
onTap: (int index) {
// 保存选中下标，并更改状态刷新
setState(() {
this._currentIndex = index;
});
},
items: [
new BottomNavigationBarItem(
icon: this.getTabIcon(0),
title: this.getTabTitle(0),
),
new BottomNavigationBarItem(
icon: this.getTabIcon(1),
title: this.getTabTitle(1),
),
new BottomNavigationBarItem(
icon: this.getTabIcon(2),
title: this.getTabTitle(2),
),
new BottomNavigationBarItem(
icon: this.getTabIcon(3),
title: this.getTabTitle(3),
),
new BottomNavigationBarItem(
icon: this.getTabIcon(4),
title: this.getTabTitle(4),
),
],
),
);
}
}

这个博客算是我自己写下的第一个博客，如果你有更好的方式 ，可以告知，一起学习，一起探讨。我会在接下来的时间中，会不断的记录下使用flutter语言开发中，所遇到的一些坑，和一些自己的心得