Flutter BottomNavigationBar 组件
BottomNavigationBar 是底部导航条,可以让我们定义底部 Tab 切换,bottomNavigationBar是 Scaffold 组件的参数。
BottomNavigationBar 常见的属性
属性名 |
说明 |
items |
List<BottomNavigationBarItem> 底 部 导 航 条按钮集合 |
iconSize |
icon |
currentIndex |
默认选中第几个 |
onTap |
选中变化回调函数 |
fixedColor |
选中的颜色 |
type |
BottomNavigationBarType.fixed BottomNavigationBarType.shifting |
示例代码:
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home:Scaffold( appBar: AppBar( title: Text("Flutter Demo"), ), body: Text("tabBar"), bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Icon(Icons.home), title: Text("首页") ), BottomNavigationBarItem( icon: Icon(Icons.category), title: Text("分类") ), BottomNavigationBarItem( icon: Icon(Icons.settings), title: Text("设置") ) ], ), ) ); } }
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home:Tabs() ); } } class Tabs extends StatefulWidget { Tabs({Key key}) : super(key: key); _TabsState createState() => _TabsState();//_xxx私有变量 } class _TabsState extends State<Tabs> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Flutter Demo"), ), body: Text("tabBar"), bottomNavigationBar: BottomNavigationBar( currentIndex: 1, onTap: (int index){ print(index); }, items: [ BottomNavigationBarItem( icon: Icon(Icons.home), title: Text("首页") ), BottomNavigationBarItem( icon: Icon(Icons.category), title: Text("分类") ), BottomNavigationBarItem( icon: Icon(Icons.settings), title: Text("设置") ) ], ), ); } }
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home:Tabs() ); } } class Tabs extends StatefulWidget { Tabs({Key key}) : super(key: key); _TabsState createState() => _TabsState(); } class _TabsState extends State<Tabs> { int _currentIndex=0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Flutter Demo"), ), body: Text("tabBar"), bottomNavigationBar: BottomNavigationBar( currentIndex: this._currentIndex, onTap: (int index){ setState(() { this._currentIndex=index; }); }, items: [ BottomNavigationBarItem( icon: Icon(Icons.home), title: Text("首页") ), BottomNavigationBarItem( icon: Icon(Icons.category), title: Text("分类") ), BottomNavigationBarItem( icon: Icon(Icons.settings), title: Text("设置") ) ], ), ); } }
开发中推荐(抽取分离):
import 'package:flutter/material.dart'; import 'pages/Tabs.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home:Tabs() ); } }
tabs.dart
import 'package:flutter/material.dart'; import 'tabs/Home.dart'; import 'tabs/Category.dart'; import 'tabs/Setting.dart'; class Tabs extends StatefulWidget { Tabs({Key key}) : super(key: key); _TabsState createState() => _TabsState(); } class _TabsState extends State<Tabs> { int _currentIndex=0; List _pageList=[ HomePage(), CategoryPage(), SettingPage(), ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Flutter Demo"), ), body: this._pageList[this._currentIndex], bottomNavigationBar: BottomNavigationBar( currentIndex: this._currentIndex, //配置对应的索引值选中 onTap: (int index){ setState(() { //改变状态 this._currentIndex=index; }); }, iconSize:36.0, //icon的大小 fixedColor:Colors.red, //选中的颜色 type:BottomNavigationBarType.fixed, //配置底部tabs可以有多个按钮 items: [ BottomNavigationBarItem( icon: Icon(Icons.home), title: Text("首页") ), BottomNavigationBarItem( icon: Icon(Icons.category), title: Text("分类") ), BottomNavigationBarItem( icon: Icon(Icons.settings), title: Text("设置") ) ], ), ); } }
home.dart
import 'package:flutter/material.dart'; class HomePage extends StatefulWidget { HomePage({Key key}) : super(key: key); _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { @override Widget build(BuildContext context) { return Text("首页"); } }
其他类似
即可实现常用的底部导航条tab切换,实现显示不同的页面内容!
最后,关注【码上加油站】微信公众号后,有疑惑有问题想加油的小伙伴可以码上加入社群,让我们一起码上加油吧!!!