11. BottomNavigationBar of Flutter learning to customize the bottom navigation bar and page switching

BottomNavigationBar

BottomNavigationBarIt is the bottom navigation bar, which allows us to define the bottom tab switch. It is the parameter of the component bottomNavigationBarmentioned before. Common attributes:Scaffold

attribute name	illustrate
items	List<BottomNavigationBar>Bottom navigation bar collection
iconSize	icon size
currentIndex	Which number is selected by default
onTap	Selected change callback function
fixedColor	selected color
type	BottomNavigationBarType.fied BottomNavigationBarType.shifting

Note: If there are more than 3 tabs at the bottom, you need to use BottomNavigationBarType.fiedthis attribute to display normally

main()=>runApp(MyApp());
class MyApp extends StatelessWidget{


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Tabs(),
    );
  }

}

class Tabs extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _TabsState();
  }

}

class _TabsState extends State<Tabs>{
  int _bottomIndex=0;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text('Flutter BottomNavigationBar'),),
      body: Text('tabBar'),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this._bottomIndex,//对应点击/显示哪个底部导航栏按钮
        onTap: (index){ //bottomNavigationBar的点击事件
          setState(() {
            this._bottomIndex=index;  //将选中的下标进行替换
          });
        },
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('首页')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text('设置')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.mood),
              title: Text('我的')
          ),
        ],
      ),
    );
  }
}

It can be seen that as we click on the tab, the color of the tab will switch.

Advanced, click Tab to switch pages

First we create the page
homepage

class HomePage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _HomePageState();
  }

}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('首页'),
    );
  }
}

set up

class CategoryPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _CategoryPageState();
  }

}

class _CategoryPageState extends State<CategoryPage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('这是设置页面'),
    );
  }
}

mine

class MinePage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _MinePageState();
  }

}

class _MinePageState extends State<MinePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('这是我的页面'),
    );
  }
}

Then our _TabsStateclass can be modified as follows

class _TabsState extends State<Tabs>{
  List<Widget> _page=[HomePage(),SettignPage(),MinePage()]; //用于存放对应的页面
  int _bottomIndex=0;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text('Flutter BottomNavigationBar'),),
      body:this._page[_bottomIndex],//此处取下标对应的页面即可
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this._bottomIndex,//对应点击/显示哪个底部导航栏按钮
        onTap: (index){ //bottomNavigationBar的点击事件
          setState(() {
            this._bottomIndex=index;  //将选中的下标进行替换
          });
        },
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('首页')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text('设置')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.mood),
              title: Text('我的')
          ),
        ],
      ),
    );
  }
}