Flutter BottomNavigationBar 实现页面底部tab切换

一、关于Flutter BottomNavigationBar 组件

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

Flutter BottomNavigationBar 常见的属性

二、 Flutter BottomNavigationBar 实现底部Tab切换 （基础版本）

Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo')
        ),
        body: this._pagesList[this._curentIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _curentIndex,
          onTap: _changePage,
          fixedColor: Colors.black,
          type: BottomNavigationBarType.fixed,
          items: [
            BottomNavigationBarItem(
              title:Text("首页"),
              icon:Icon(Icons.home)
            ),
            BottomNavigationBarItem(
              title:Text("分类"),
              icon:Icon(Icons.category)
            ),
            BottomNavigationBarItem(
              title:Text("设置"),
              icon:Icon(Icons.settings)
            ),
            
          ],
        ),
)

完整代码：

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> {
  @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),
              label: "首页"
            ),
             BottomNavigationBarItem(
              icon: Icon(Icons.category),             
              label: "分类"
            ),
            
             BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: "设置"             
            )
          ],
        ),
      );
  }
}

三、 Flutter BottomNavigationBar 实现自定义底部tab切换（完整版本）

1、\lib\pages\tabs 新建Home.dart Category.dart Setting.dart

Home.dart

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  //Flutter2.2.0之后需要注意把Key改为可空类型  {Key? key} 表示Key为可空类型
  HomePage({Key? key}) : super(key: key);

  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Text("我是首页组件");
  }
}

Category.dart

import 'package:flutter/material.dart';

class CategoryPage extends StatefulWidget {
   //Flutter2.2.0之后需要注意把Key改为可空类型  {Key? key} 表示Key为可空类型
  CategoryPage({Key? key}) : super(key: key);

  _CategoryPageState createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
  @override
  Widget build(BuildContext context) {
    return Text("分类");
  }
}

Setting.dart

import 'package:flutter/material.dart';

class SettingPage extends StatefulWidget {
   //Flutter2.2.0之后需要注意把Key改为可空类型  {Key? key} 表示Key为可空类型
  SettingPage({Key? key}) : super(key: key);

  _SettingPageState createState() => _SettingPageState();
}

class _SettingPageState extends State<SettingPage> {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(
          title: Text("我是一个文本"),
        ),
         ListTile(
          title: Text("我是一个文本"),
        ),
         ListTile(
          title: Text("我是一个文本"),
        ),
         ListTile(
          title: Text("我是一个文本"),
        )
      ],
    );
  }
}

2、lib\pages 新建Tabs.dart

import 'package:flutter/material.dart';
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart';

class Tabs extends StatefulWidget {
  //Flutter2.2.0之后需要注意把Key改为可空类型  {Key? key} 表示Key为可空类型
  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),
              label: "首页"
            ),
             BottomNavigationBarItem(
              icon: Icon(Icons.category),             
              label: "分类"
            ),
            
             BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: "设置"             
            )
          ],
        ),
      );
  }
}

3、配置main.dart

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()
    );
  }
}