FlutterBottomNavigationBar自定义底部导航栏，实现页面切换

Flutter BottomNavigationBar组件

BottomNavigationBar是底部导航条，可以让我们定义底部Tab切换，bottomNatigationBar是Scaffold组件的参数。

BottomNavigationBar常见属性

实现一个页面切换功能目录

main.dart

import &＃39;package:flutter/material.dart&＃39;;
import &＃39;package:stack_align_positioned/pages/Tabs.dart&＃39;;
import &＃39;reg/listData.dart&＃39;;
void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {int _curentIndex = 0;// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(home: Tabs(),);}}


Tabs.dart

import &＃39;package:flutter/cupertino.dart&＃39;;
import &＃39;package:flutter/material.dart&＃39;;
import &＃39;package:stack_align_positioned/main.dart&＃39;;
import &＃39;package:stack_align_positioned/pages/tabs/CategoryPages.dart&＃39;;
import &＃39;package:stack_align_positioned/pages/tabs/HomePage.dart&＃39;;
import &＃39;package:stack_align_positioned/pages/tabs/SettingsPages.dart&＃39;;class Tabs extends StatefulWidget{@overrideState createState() {return _TabsState();}
}class _TabsState extends State{int _currentIndex = 0;List _listPageData = [ //页面的链表HomePages(),CategoryPages(),SettingsPages()];@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("Flutter BottomNavigationBar"),),body: this._listPageData[_currentIndex],bottomNavigationBar: BottomNavigationBar(currentIndex: this._currentIndex,//配置对应的索引值选中onTap: (int index){//index 表示选择选项setState(() {print("Tagwjlis index = ${index}");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("设置"))],),);}
}

HomePages.dart

import &＃39;package:flutter/cupertino.dart&＃39;;class HomePages extends StatefulWidget{@overrideState createState() {return _HomeState();}}class _HomeState extends State{@overrideWidget build(BuildContext context) {return Center(child: Text("Home Text"),);}
}

CategoryPages.dart

import &＃39;package:flutter/cupertino.dart&＃39;;class CategoryPages extends StatefulWidget{@overrideState createState() {return _CategorysStae();}
}class _CategorysStae extends State{@overrideWidget build(BuildContext context) {return Center(child: Text("CategoryPages center"),);}
}

SettingsPages.dart

import &＃39;package:flutter/cupertino.dart&＃39;;class SettingsPages extends StatefulWidget{@overrideState createState() {return _SettingsStae();}
}class _SettingsStae extends State{@overrideWidget build(BuildContext context) {return Center(child: Text("SettingsPages center"),);}
}