this.type,
Color? fixedColor,
this.backgroundColor,
this.iconSize = 24.0,
Color? selectedItemColor,
this.unselectedItemColor,
this.selectedIconTheme,
this.unselectedIconTheme,
this.selectedFontSize = 14.0,
this.unselectedFontSize = 12.0,
this.selectedLabelStyle,
this.unselectedLabelStyle,
this.showSelectedLabels,
this.showUnselectedLabels,
this.mouseCursor,
})

其中常用的属性为：

• items：及对应的页面组件数组
• currentIndex：默认显示第几个页面
• type：组件类型，使用BottomNavigationBarType枚举，有 fixed 和 shifting 两种。fixed 是图标固定位置，而 shifting 的图标点击后会有一个漂移效果，可以实际试一下，一般用fixed 比较多。
• onTap：点击后的事件，一般用这个更新状态数据，以便更新页面。

其他属性用于控制样式的，可以根据实际需要设置图标大小，主题色，字体等参数。

构建项目页面结构

首先，新建四个业务页面，分别是 dynamic.dart，message.dart，category.dart 和 mine.dart，分别对应动态、消息、分类浏览和个人中心四个页面。目前这四个页面很简单，只是在页面中间依次显示“岛上码农”四个字。代码都是类似的，以 dynamic 为例：

import ‘package:flutter/material.dart’;

class DynamicPage extends StatelessWidget {
const DynamicPage({Key key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text(‘岛’),
),
);
}
}

注意的是这里的 Scaffold 没有 AppBar 了，这是因为在首页已经有了，如果再有 AppBar 就会出现两个。

其次，新建首页，用于管理四个业务页面，命名为 app.dart。app.dart 使用了 BottomNavigationBar 管理四个业务页面的切换。

import ‘package:flutter/material.dart’;
import ‘dynamic.dart’;
import ‘message.dart’;
import ‘category.dart’;
import ‘mine.dart’;

class AppHomePage extends StatefulWidget {
AppHomePage({Key key}) : super(key: key);

@override
_AppHomePageState createState() => _AppHomePageState();
}

class _AppHomePageState extends State {
int _index = 0;

List _homeWidgets = [
DynamicPage(),
MessagePage(),
CategoryPage(),
MinePage(),
];

void _onBottomNagigationBarTapped(index) {
setState(() {
_index = index;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘岛上码农’),
),
body: IndexedStack(
index: _index,
children: _homeWidgets,
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: _index,
onTap: _onBottomNagigationBarTapped,
items: [
_getBottomNavItem(
‘动态’, ‘images/dynamic.png’, ‘images/dynamic-hover.png’, 0),
_getBottomNavItem(
’ 消息’, ‘images/message.png’, ‘images/message-hover.png’, 1),
_getBottomNavItem(
‘分类浏览’, ‘images/category.png’, ‘images/category-hover.png’, 2),
_getBottomNavItem(
‘个人中心’, ‘images/mine.png’, ‘images/mine-hover.png’, 3),
],
),
);
}

BottomNavigationBarItem _getBottomNavItem(

最后

以前一直是自己在网上东平西凑的找，找到的东西也是零零散散，很多时候都是看着看着就没了，时间浪费了，问题却还没得到解决，很让人抓狂。

后面我就自己整理了一套资料，还别说，真香！

资料有条理，有系统，还很全面，我不方便直接放出来，大家可以先看看有没有用得到的地方吧。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

//bbs.csdn.net/topics/618156601)**

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！