Flutter BottomNavigationBar：底部导航条实现页面切换

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

常用属性：

注意点：

1.BottomNavigationBar用在Scaffold组件下
2.当底部导航页面超过三个时，必须要添加type属性（BottomNavigationBarType.fixed），否则底部导航会全白，看不到效果
3.items中是一个BottomNavigationBarItem的集合，里面包含图片及文字标签，视频教程中给的文字使用的是title，我在使用时提示被弃用，但可以使用label直接给文字
4.currentIndex是BottomNavigationBar 中的属性，是为底部导航页面编的号，从零开始
5.我们要改变页面时在onTap中获取点击页面的编号：
onTap: (int index) {
setState(() {
currentIndex = index;
});
},
然后调用setState改变展示的页面
6. body中是我们展示的页面，我们将所有页面放在一个集合中，通过上一步中获取到的下标定位到指定页面

简单
演示：

        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              label: '首页',
              icon: Icon(Icons.home),
              tooltip: '首页',  //长按显示的文本
            ),
            BottomNavigationBarItem(
              label: '搜索',
              icon: Icon(Icons.search),
              tooltip: '搜索',
            ),
            BottomNavigationBarItem(
              label: '添加',
              icon: Icon(Icons.add_box),
              tooltip: '添加',
            ),
          ],
        ),

添加点击选中功能：

        int currentIndex=0;
        ///
        currentIndex: this.currentIndex,//配置默认选中的菜单，从下标零开始
        onTap: (int index){
    
    
          setState(() {
    
    
            this.currentIndex=index;
          });
        },

实现底部菜单栏选中页面跳转：
首先，新建三个页面：

HomePage.dart:

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
    
    
  const HomePage({
    
    Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Text('home');
  }
}

其余两个都差不多。

随后将三个页面导入，并将页面放入一个List中：

  List _pageList=[
    HomePage(),
    SettingPage(),
    CateGoryPage()
  ];

之后在body处遍历List即可。
这是一个比较普遍的思路。
全部代码：

import 'package:flutter/material.dart';
import 'Tabs/Home.dart';
import 'Tabs/Setting.dart';
import 'Tabs/CateGory.dart';

class Tabs extends StatefulWidget {
    
    
  const Tabs({
    
    Key? key}) : super(key: key);

  @override
  State<Tabs> createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
    
    
  int _currentIndex=0;
  List _pageList=[
    HomePage(),
    SettingPage(),
    CateGoryPage()
  ];
  @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: 50,//icon大小
        fixedColor: Colors.red,//选中时颜色
        type: BottomNavigationBarType.fixed,//三个以上一定要设置type属性保证正常显示
        items: [
          BottomNavigationBarItem(
            label: '首页',
            icon: Icon(Icons.home),
            tooltip: '首页',  //长按显示的文本
          ),
          BottomNavigationBarItem(
            label: '设置',
            icon: Icon(Icons.settings),
            tooltip: '设置',
          ),
          BottomNavigationBarItem(
            label: '分类',
            icon: Icon(Icons.category),
            tooltip: '分类',
          ),
        ],
      ),
    );
  }
}