Flutter-BottomNavigationBar的使用说明

Flutter-BottomNavigationBar的使用说明

在目前的app使用过程中，使用最多的场景莫过于有一个底部的Tabbar，在Flutter中也有类似的Widget，这个Widget就是今天要为大家介绍的BottomNavigationBar；BottomNavigationBar这个Widget在Scaffold这个Widget下面。

讲这个Widget之前我们先温习一下之前两个Widgets

Flutter-AppBar的使用说明

Flutter-TabBar的使用说明

BottomNavigationBar的定义

BottomNavigationBar在使用之前，我们看下常用的属性有哪些：

BottomNavigationBar({
    Key key,
    @required this.items,//必须要实现的，最少要有两个子widgets
    this.onTap,//点击事件，知道当前点击的是哪一个widget
    this.currentIndex = 0,//当前显示的是哪一个widget
    this.elevation = 8.0,
    BottomNavigationBarType type,//设置items的布局
    Color fixedColor,//相当于selectedItemColor，但是不能跟selectedItemColor同时存在
    this.backgroundColor,//设置背景颜色
    this.iconSize = 24.0,//设置图标大小
    Color selectedItemColor,//设置选中时的颜色
    this.unselectedItemColor,//设置没选中时的颜色
    this.selectedIconTheme = const IconThemeData(),//设置选中时的icon的主题
    this.unselectedIconTheme = const IconThemeData(),//设置没选中时的icon的主题
    this.selectedFontSize = 14.0,//设置选中时文字大小
    this.unselectedFontSize = 12.0,//设置没选中时的文字大小
    this.selectedLabelStyle,//设置选中时的labe样式
    this.unselectedLabelStyle,//设置没选中时的labe样式
    this.showSelectedLabels = true,//设置选中时是否显示文字
    bool showUnselectedLabels,//设置没选中时是否显示文字
  })

BottomNavigationBar的简单使用

BottomNavigationBar首先展示一下点击底部按钮没有反应的demo，就相当于是一个空白的纸张，等候后续再去填充。演示代码如下：

class NavigationBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: SimpleNavBarDemo(),
    );
  }
}

class SimpleNavBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('SimpleNavBarDemo'),
      ),
//      body: ,
    bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
            title: Text('首页')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.business),
              title: Text('商务')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.my_location),
              title: Text('定位')
          ),
        ]
    ),
    );
  }
}

运行效果如下所示：

这个时候的底部Tabbar已经创建完成，点击按钮也有反应，但是在点击的时候不会进行切换，下面我们就对其进行完善。

BottomNavigationBar的完善

要想对底部TabBar的按钮点击进行页面切换，需要有状态的Widget，就要在创建的时候声明为StatefulWidget，下面请看代码：

class NavigationBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: ClickedNavBarDemo(),
    );
  }
}

class ClickedNavBarDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => ClickedNavBarDemoState();
}
class ClickedNavBarDemoState extends State<ClickedNavBarDemo> {
  int _current_index = 0;//记录当前选择的是哪一个
  final List<Widget> _pages = [//装在页面
    HomePage(),
    BusinessPage(),
    MyLocationPage()
  ];
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('ClickedNavBarDemoState'),
      ),
      body: _pages[_current_index],//展示组件
      bottomNavigationBar: BottomNavigationBar(
        showSelectedLabels: true,
        type: BottomNavigationBarType.fixed,
fixedColor: Colors.redAccent,
//        unselectedLabelStyle: TextStyle(color: Colors.orange),
        unselectedItemColor: Colors.grey,
//        selectedItemColor: Colors.orange,
        currentIndex: _current_index,
        onTap: (int index) {//点击事件
          setState(() {//修改状态，会自动刷新Widget
            this._current_index = index;
          });
        },
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.home),
                title: Text('首页')
            ),
            BottomNavigationBarItem(
                icon: Icon(Icons.business),
                title: Text('商务')
            ),
            BottomNavigationBarItem(
                icon: Icon(Icons.my_location),
                title: Text('定位')
            ),
          ]
      ),
    );
  }
}

//首页页面
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      alignment: Alignment.center,
      color: Colors.redAccent,
      child: Text('首页', style: TextStyle(
        color: Colors.black,
        fontSize: 40.0
      ),),
    );
  }
}
//商务页面
class BusinessPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      alignment: Alignment.center,
      color: Colors.redAccent,
      child: Text('商务', style: TextStyle(
          color: Colors.black,
          fontSize: 40.0
      ),),
    );
  }
}
//定位页面
class MyLocationPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      alignment: Alignment.center,
      color: Colors.redAccent,
      child: Text('定位', style: TextStyle(
          color: Colors.black,
          fontSize: 40.0
      ),),
    );
  }
}

运行效果：