flutter 自定义bottomNavigationBar 底部导航栏

demo地址

系统icon

BottomNavigationBar是底部导航条，可以让我们定义底部Tab切换，bottomNavigationBar 。是Scaffold组件的参数。
如下所示： 自定义一个 Tabbar的组件 然后创建几个 页面组件
效果图如下：

效果图.jpg

Tabs代码如下：

// 第一步：引入相关文件
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'tabs/HomePage.dart';
import 'tabs/CategoryPage.dart';
import 'tabs/SettingPage.dart';

// 第二步：创建一个有状态的Tabs 组件
class Tabs extends StatefulWidget {
  Tabs({Key? key}) : super(key: key);

  @override
  _TabsState createState() => _TabsState();
}

class _TabsState extends State {

  //记录当前tabbar点击的下标
  int _currentIndex=0;
  //存放tabbar
  List _pageList =[
    HomePage(),
    CategoryPage(),
    SettingPage()
  ];
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        //设置导航条
        appBar: AppBar(
          title: Text('这是一个flutter'),
          backgroundColor: Colors.red,
        ),

        // 设置需要显示的内容。
        body: this._pageList[this._currentIndex],
        //创建tabbar
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: this._currentIndex,
          //tabbar的点击事件
          onTap: (int index) {
            setState(() {
              this._currentIndex = index;
            });
          },
          //设置图标尺寸
          iconSize: 30,
          //设置选中图标的颜色
          fixedColor: Colors.red,
          //设置item
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
            BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
            BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
          ],
        ),
      ),
    );
  }
}

注意：BottomNavigationBarItem 中的icon 是一个组件 这个组件可以使用系统的 icons 也可以使用自定义的 Image

如下所示：

//_imageurl:是动态传入的图片路径 因为tabbar有选中和非选中的状态 所以需要动态传入
BottomNavigationBarItem(icon:Image.asset(_imageurl,width: 30,height: 30,fit: BoxFit.cover,) , label: "首页"),

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