flutter 底部导航栏 BottomNavigationBar
话不多说,上代码
import 'package:flutter/material.dart'; import 'package:flutter_zhihu/pages/tabs/homeTab.dart'; class TabsController extends StatefulWidget { @override _TabsControllerState createState() => _TabsControllerState(); } class _TabsControllerState extends State<TabsController> { int _currentIndex = 0; final pages = [HomeTab(),HomeTab(),HomeTab(),HomeTab(),HomeTab()]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('标题'), actions: [ IconButton(icon: Icon(Icons.search), onPressed: (){ print('惦记了搜索'); }) ], ), bottomNavigationBar: BottomNavigationBar( items: bottomNavItems,//配置底部菜单 currentIndex: _currentIndex,//当前菜单在第几个 onTap: (index){
//菜单切换事件 _changePage(index); }, type: BottomNavigationBarType.fixed,//菜单切换效果 ), body: pages[_currentIndex],//菜单页面切换 ); }
//定义底部菜单 final List<BottomNavigationBarItem> bottomNavItems = [ BottomNavigationBarItem( backgroundColor: Colors.blue, icon: Icon(Icons.home), label: '首页', ), BottomNavigationBarItem( backgroundColor: Colors.green, icon: Icon(Icons.message), label: '视频', ), BottomNavigationBarItem( backgroundColor: Colors.amber, icon: Icon(Icons.shopping_cart), label: '会员', ), BottomNavigationBarItem( backgroundColor: Colors.red, icon: Icon(Icons.person), label: '消息', ), BottomNavigationBarItem( backgroundColor: Colors.red, icon: Icon(Icons.person), label: '我的', ), ]; /*切换页面*/ void _changePage(int index) { /*如果点击的导航项不是当前项 切换 */ if (index != _currentIndex) { setState(() { _currentIndex = index; }); } } }