在移动开发中,底部导航栏是很是常见的,在以前我也写过一篇关于在Android中如何使用底部导航栏的博客,感兴趣的能够看一下。
Android底部导航栏BottomNavigationBar使用方法html
下面,咱们来看一下在Flutter 中 底部导航栏是如何使用的。web
首先看一下效果图:app
shifting模式
less
fixed模式
ide
首先,bottomNavigationBar 是属于 Scaffold 中的一个位于底部的控件。一般和 BottomNavigationBarItem 配合使用svg
BottomNavigationBar构造方法函数
BottomNavigationBar({ Key key, @required this.items, this.onTap, this.currentIndex = 0, BottomNavigationBarType type, this.fixedColor, this.iconSize = 24.0, })
属性 | 值类型 | 说明 |
---|---|---|
items | BottomNavigationBarItem类型的List | 底部导航栏的显示项 |
onTap | ValueChanged < int > | 点击导航栏子项时的回调 |
currentIndex | int | 当前显示项的下标 |
type | BottomNavigationBarType | 底部导航栏的类型,有fixed和shifting两个类型,显示效果不同 |
fixedColor | Color | 底部导航栏type为fixed时导航栏的颜色,若是为空的话默认使用ThemeData.primaryColor |
iconSize | double | BottomNavigationBarItem icon的大小 |
BottomNavigationBar中属性比较简单,下面咱们来看一下BottomNavigationBarItemui
底部导航栏要显示的Item,有图标和标题组成this
构造方法:.net
const BottomNavigationBarItem({ @required this.icon, this.title, Widget activeIcon, this.backgroundColor, })
属性 | 值类型 | 说明 |
---|---|---|
icon | Widget | 要显示的图标控件,通常都是Iocn |
title | Widget | 要显示的标题控件,通常都是Text |
activeIcon | Widget | 选中时要显示的icon,通常也是Icon |
backgroundColor | Color | BottomNavigationBarType为shifting时的背景颜色 |
通常来讲,点击底部导航栏都是要进行页面切换或者更新数据的,咱们须要动态的改变一些状态,因此,咱们要继承自StatefulWidget
class IndexPage extends StatefulWidget { @override State<StatefulWidget> createState() { return _IndexState(); } }
首先,咱们须要准备导航栏要显示的项:
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,而后指定items,currentIndex,type(默认是fixed)、onTap等属性
Scaffold( appBar: AppBar( title: Text("底部导航栏"), ), bottomNavigationBar: BottomNavigationBar( items: bottomNavItems, currentIndex: currentIndex, type: BottomNavigationBarType.shifting, onTap: (index) { _changePage(index); }, ), body: pages[currentIndex], ); }
这里咱们主要看一下onTap,该属性接收一个方法回调,其中,index表示当前点击导航项的下标,也就是items的下标。
知道下标后,咱们只须要更改currentIndex便可。
下面咱们来看一下_changePage方法:
/*切换页面*/ void _changePage(int index) { /*若是点击的导航项不是当前项 切换 */ if (index != currentIndex) { setState(() { currentIndex = index; }); } }
如此一来,咱们就实现了点击底部导航项切换页面的效果了,很是简单。
所有代码:
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; }); } } }
效果图以下
通常状况下,咱们底部导航栏不会弄得这么花哨,因此通常都是使用fixed模式,此时,导航栏的图标和标题颜色会使用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 底部导航栏就这些,仍是很简单的。
若是你以为本文对你有帮助,麻烦动动手指顶一下,算是对本文的一个承认。也能够关注个人 Flutter 博客专栏,我会不按期的更新,若是文中有什么错误的地方,还望指正,转载请注明转自喻志强的博客 ,谢谢!