Flutter 底部Tab导航栏

实现底部导航栏并点击切换页面可简述为有三种方式

• TabBar + TabBarView
• BottomNavigationBar + BottomNavigationBarItem
• 自定义 BottomAppBar

BottomNavigationBar + BottomNavigationBarItem

bottomNavigationBar 是属于 Scaffold 中的一个位于底部的控件。通常和 BottomNavigationBarItem 配合 开发底部导航栏

常用属性

属性	值类型	说明
items	BottomNavigationBarItem类型的List	底部导航栏的显示项
onTap	ValueChanged < int >	点击导航栏子项时的回调
currentIndex	int	当前显示项的下标
type	BottomNavigationBarType	底部导航栏的类型，有fixed和shifting两个类型，显示效果不一样
fixedColor	Color	底部导航栏type为fixed时导航栏的颜色，如果为空的话默认使用ThemeData.primaryColor
iconSize	double	BottomNavigationBarItem icon的大小

BottomNavigationBarItem

底部导航栏要显示的Item，由图标和标题组成

属性	值类	说明
icon	Widget	要显示的图标控件，一般都是Iocn
title	Widget	要显示的标题控件，一般都是Text
activeIcon	Widget	选中时要显示的icon，一般也是Icon
backgroundColor	Color	BottomNavigationBarType为shifting时的背景颜色

简单的一个BottomNavigationBar实现

效果图

int _selectedIndex = 0; //底部菜单选中值

Scaffold(
  // ... 省略一些代码
  body: pages[_selectedIndex],  //底部导航栏对应内容
  bottomNavigationBar: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
      BottomNavigationBarItem(icon: Icon(Icons.add), title: Text('发布')),
      BottomNavigationBarItem(icon: Icon(Icons.menu), title: Text('我的'))
    ],
    currentIndex: _selectedIndex,
    type: BottomNavigationBarType.fixed,
    fixedColor: Colors.blue,
    onTap: _onItemTapped,
  ),
)

// 点击事件
void _onItemTapped(int index) {
  setState(() {
    _selectedIndex = index;
  });
}

通过点击对应的菜单，显示不同内容

//点击底部导航项要显示的页面
  final pages = [
    ChildItemView("首页"),
    ChildItemView("发布"),
    ChildItemView("我的")
  ];

//BottomNavigationBar子页面
class ChildItemView extends StatefulWidget {
  String _title;

  ChildItemView(this._title);

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

class _ChildItemViewState extends State {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(child: Text(widget._title)),
    );
  }
}

实现效果图：

image.png

自定义 BottomAppBar

用BottomAppBar的话导航栏每个图标都需要自己实现选中和未选中动态效果，还需要给每个按钮添加点击事件，比较繁琐。但是BottomAppBar比较灵活，可以实现很炫酷的效果

这里简单展示样式效果，配合悬浮按钮实现凹下去的效果

image.png

//悬浮按钮
floatingActionButton: FloatingActionButton(
    onPressed: () => print("FloatingActionButton"),
    child: IconButton(icon: Icon(Icons.add), onPressed: () {}),
  ),
//悬浮按钮位置
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
//底部按钮
bottomNavigationBar: BottomAppBar(
    color: Colors.blue, //底部工具栏的颜色。
    shape:
        CircularNotchedRectangle(), //设置底栏的形状，一般使用有缺口的圆形矩形和floatingActionButton融合，
    child: Padding(
      //里边可以放置大部分Widget，可以自由设计底栏
      padding: EdgeInsets.fromLTRB(0, 6, 0, 6),
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(
                Icons.home,
                color: Colors.white,
              ),
              Text("首页", style: TextStyle(color: Colors.white))
            ],
          ),
          Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(
                Icons.home,
                color: Colors.transparent,
              ),
              Text("发布", style: TextStyle(color: Colors.white))
            ],
          ),
          GestureDetector(
              child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(Icons.person, color: Colors.white),
              Text("我的", style: TextStyle(color: Colors.white))
            ],
          ))
        ],
      ),
    ),
),