Flutter底部导航栏BottomNavigationBar
发布时间
阅读量：
阅读量
Flutter底部导航栏BottomNavigationBar
文章目录
Flutter 底部导航栏（BottomNavigationBar）
在移动开发领域中，底部导航栏是一种普遍使用的功能，在我的另一篇博客文章中详细介绍了如何利用Android平台实现底部导航功能，感兴趣的朋友可以参考这篇内容
下面，我们来看一下在Flutter 中 底部导航栏是如何使用的。
首先看一下效果图：
shifting模式
fixed模式
BottomNavigationBar
其中**bottomNavigationBar这个控件属于Scaffold类族下的一个处于底部位置的组件，在实际应用中常用于与BottomNavigationBarItem**组件协同工作以实现导航功能
BottomNavigationBar构造方法
BottomNavigationBar({
Key key,
@required this.items,
this.onTap,
this.currentIndex = 0,
BottomNavigationBarType type,
this.fixedColor,
this.iconSize = 24.0,
})
123456789| 属性 | 值类型 | 说明 |
|---|---|---|
| items | BottomNavigationBarItem类型的List | 底部导航栏的显示项 |
| onTap | ValueChanged < int > | 点击导航栏子项时的回调 |
| currentIndex | int | 当前显示项的下标 |
| type | BottomNavigationBarType | 底部导航栏的类型，有fixed和shifting两个类型，显示效果不一样 |
| fixedColor | Color | 底部导航栏type为fixed时导航栏的颜色，如果为空的话默认使用ThemeData.primaryColor |
| iconSize | double | BottomNavigationBarItem icon的大小 |
在BottomNavigationBar类中字段相对简单,让我们深入了解其具体实现形式
BottomNavigationBarItem
底部导航栏要显示的Item，有图标和标题组成
| 属性 | 值类型 | 说明 |
|---|---|---|
| icon | Widget | 要显示的图标控件，一般都是Iocn |
| title | Widget | 要显示的标题控件，一般都是Text |
| activeIcon | Widget | 选中时要显示的icon，一般也是Icon |
| backgroundColor | Color | BottomNavigationBarType为shifting时的背景颜色 |
简单使用
通常情况下，点击底部导航栏的行为通常是用于切换页面或更新数据。因此，在实现过程中需要实时地动态改变某些状态，并且为了满足需求的一致性与可维护性考虑，我们需要继承自Stateulling的状态管理功能。
class IndexPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _IndexState();
}
}
123456首先，我们需要准备导航栏要显示的项：
final List<BottomNavigationBarItem> bottomNavItems = [
BottomNavigationBarItem(
backgroundColor: Colors.blue,
icon: Icon(Icons.home),
title: Text("首页"),
),
BottomNavigationBarItem(
backgroundColor: Colors.green,
icon: Icon(Icons.message),
title: Text("消息"),
),
BottomNavigationBarItem(
backgroundColor: Colors.amber,
icon: Icon(Icons.shopping_cart),
title: Text("购物车"),
),
BottomNavigationBarItem(
backgroundColor: Colors.red,
icon: Icon(Icons.person),
title: Text("个人中心"),
),
];以及点击导航项是要显示的页面：
final pages = [HomePage(), MsgPage(), CartPage(), PersonPage()];由于是演示，页面很简单，都是只放一个Text
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text("首页"),
);
}
}所有组件已就绪即可启动底部导航功能。在Scaffold环境中调用bottomNavigationBar方法，并设置必要的属性配置：显示的项目列表、当前索引位置、固定布局以及单击事件处理。
Scaffold(
appBar: AppBar(
title: Text("底部导航栏"),
),
bottomNavigationBar: BottomNavigationBar(
items: bottomNavItems,
currentIndex: currentIndex,
type: BottomNavigationBarType.shifting,
onTap: (index) {
_changePage(index);
},
),
body: pages[currentIndex],
);
}
123456789101112131415我们重点分析一下onTap 这一属性，在此机制中...会响应一个方法调用。其中index代表当前点击导航项的位置索引，在此机制中...会返回当前列表中的位置索引值。一旦确定了索引值，在后续操作中我们只需更新currentIndex 这一项即可。
下面我们来看一下_changePage方法：
/*切换页面*/
void _changePage(int index) {
/*如果点击的导航项不是当前项 切换 */
if (index != currentIndex) {
setState(() {
currentIndex = index;
});
}
}
123456789如此一来，我们就实现了点击底部导航项切换页面的效果了，非常简单。
全部代码：
import 'package:flutter/material.dart';
import 'package:flutter_sample/widget/bottom_nav/cart_page.dart';
import 'package:flutter_sample/widget/bottom_nav/home_page.dart';
import 'package:flutter_sample/widget/bottom_nav/msg_page.dart';
import 'package:flutter_sample/widget/bottom_nav/person_page.dart';
class IndexPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _IndexState();
}
}
class _IndexState extends State<IndexPage> {
final List<BottomNavigationBarItem> bottomNavItems = [
BottomNavigationBarItem(
backgroundColor: Colors.blue,
icon: Icon(Icons.home),
title: Text("首页"),
),
BottomNavigationBarItem(
backgroundColor: Colors.green,
icon: Icon(Icons.message),
title: Text("消息"),
),
BottomNavigationBarItem(
backgroundColor: Colors.amber,
icon: Icon(Icons.shopping_cart),
title: Text("购物车"),
),
BottomNavigationBarItem(
backgroundColor: Colors.red,
icon: Icon(Icons.person),
title: Text("个人中心"),
),
];
int currentIndex;
final pages = [HomePage(), MsgPage(), CartPage(), PersonPage()];
@override
void initState() {
super.initState();
currentIndex = 0;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("底部导航栏"),
),
bottomNavigationBar: BottomNavigationBar(
items: bottomNavItems,
currentIndex: currentIndex,
type: BottomNavigationBarType.shifting,
onTap: (index) {
_changePage(index);
},
),
body: pages[currentIndex],
);
}
/*切换页面*/
void _changePage(int index) {
/*如果点击的导航项不是当前项 切换 */
if (index != currentIndex) {
setState(() {
currentIndex = index;
});
}
}
}效果图如下
通常情况下，默认情况下或一般而言，在设计底部导航栏时，并不会设计得过于复杂。因此通常采用固定布局方式，在这种情况下，
导航栏的图标和标题的颜色将根据**fixedColor***变量来确定。
如果没有设置fixedColor变量，则默认采用主题色中的颜色参数为$primaryColor。
代码示例：
Scaffold(
appBar: AppBar(
title: Text("底部导航栏"),
),
bottomNavigationBar: BottomNavigationBar(
items: bottomNavItems,
currentIndex: currentIndex,
type: BottomNavigationBarType.fixed,
onTap: (index) {
_changePage(index);
},
),
body: pages[currentIndex],
);入口函数：
/*入口函数*/
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter入门示例程序',
theme: ThemeData(
primaryColor: Colors.blue,
),
home: IndexPage(),
);
}
}
好了，Flutter 底部导航栏就这些，还是很简单的。
全部评论 (0)
还没有任何评论哟~