Flutter系列-BottomNavigationBar使用

先上效果图：

正文：

flutter新手，第一次开发，记录开发过程

首先写了底部tab切换，使用的是官方widget-BottomNavigationBar

先上完整代码：

main.dart

import 'package:flutter/material.dart';
import 'package:sentaishenghuo/colorValue.dart';
import 'package:sentaishenghuo/pages/fifthPage.dart';
import 'package:sentaishenghuo/pages/fourthPage.dart';
import './pages/firstPage.dart';
import './pages/secondPage.dart';
import './pages/thirdPage.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  static List<Widget> _widget = <Widget>[
    new FirstPage(),
    new SecondPage(),
    new ThirdPage(),
    new FourthPage(),
    new FifthPage(),
  ];
  int _selectIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _widget.elementAt(_selectIndex),
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Image.asset(
              "assets/images/tab_equipment_item.png",
              width: 20,
              height: 20,
            ),
            activeIcon: Image.asset(
              "assets/images/tab_equipment_click.png",
              width: 20,
              height: 20,
            ),
            title: Text(
              '设备',
            ),
          ),
          BottomNavigationBarItem(
            icon: Image.asset(
              "assets/images/tab_monitoring_item.png",
              width: 20,
              height: 20,
            ),
            activeIcon: Image.asset(
              "assets/images/tab_monitoring_click.png",
              width: 20,
              height: 20,
            ),
            title: Text(
              '监测',
            ),
          ),
          BottomNavigationBarItem(
              icon: Image.asset(
                "assets/images/tab_add_equipment.png",
              ),
              title: new Container(),
              backgroundColor: Colors.white),
          BottomNavigationBarItem(
            icon: Image.asset(
              "assets/images/tab_iec_item.png",
              width: 20,
              height: 20,
            ),
            activeIcon: Image.asset(
              "assets/images/tab_iec_click.png",
              width: 20,
              height: 20,
            ),
            title: Text(
              '生态链',
            ),
          ),
          BottomNavigationBarItem(
            icon: Image.asset(
              "assets/images/tab_my_item.png",
              width: 20,
              height: 20,
            ),
            activeIcon: Image.asset(
              "assets/images/tab_my_click.png",
              width: 20,
              height: 20,
            ),
            title: Text(
              '我的',
            ),
          ),
        ],
        selectedFontSize: 12.0,//解决选中时字体会放大问题
        currentIndex: _selectIndex,
        selectedItemColor: ColorValue.colorTheme,
        type: BottomNavigationBarType.fixed,
        onTap: onItemTapped,
      ),
    );
  }

  void onItemTapped(int index) {
    setState(() {
      _selectIndex = index;
    });
  }
}

page.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class FirstPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new FirstPageState();
  }
}

class FirstPageState extends State<FirstPage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("界面1"),
      ),
      body: new Center(
        child:new Image.network('http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg'),
      ),
    );
  }
}

过程介绍：

flutter基本的写法就不介绍了，主要说下实现效果图那种底部的实现过程。

一开始上网搜索到的都是使用floatingActionButtonLocation结合bottomNavigationBar，效果如下

但是，我项目的效果是中间的按钮不用凸出来的，floatingActionButtonLocation结合bottomNavigationBar，floatingActionButton并不能调整位置，肯定是会凸出来的，所以这种方案不可行。

第一种不行，那我可以把按钮覆盖在bottomNavigationBar上面，也是可以的，使用Stack作为组件的根目录，再加一个带点击的按钮

bottomNavigationBar: Material(
        child: Stack(
          alignment: AlignmentDirectional.center,
          children: <Widget>[
            BottomNavigationBar(
              items: <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Image.asset(
                    "assets/images/tab_equipment_item.png",
                    width: 20,
                    height: 20,
                  ),
                  activeIcon: Image.asset(
                    "assets/images/tab_equipment_click.png",
                    width: 20,
                    height: 20,
                  ),
                  title: Text(
                    '设备',
                  ),
                ),
                BottomNavigationBarItem(
                  icon: Image.asset(
                    "assets/images/tab_monitoring_item.png",
                    width: 20,
                    height: 20,
                  ),
                  activeIcon: Image.asset(
                    "assets/images/tab_monitoring_click.png",
                    width: 20,
                    height: 20,
                  ),
                  title: Text(
                    '监测',
                  ),
                ),
                BottomNavigationBarItem(
                    icon: Image.asset(
                      "assets/images/tab_add_equipment.png",
                    ),
                    title: new Container(),
                    backgroundColor: Colors.white),
                BottomNavigationBarItem(
                  icon: Image.asset(
                    "assets/images/tab_iec_item.png",
                    width: 20,
                    height: 20,
                  ),
                  activeIcon: Image.asset(
                    "assets/images/tab_iec_click.png",
                    width: 20,
                    height: 20,
                  ),
                  title: Text(
                    '生态链',
                  ),
                ),
                BottomNavigationBarItem(
                  icon: Image.asset(
                    "assets/images/tab_my_item.png",
                    width: 20,
                    height: 20,
                  ),
                  activeIcon: Image.asset(
                    "assets/images/tab_my_click.png",
                    width: 20,
                    height: 20,
                  ),
                  title: Text(
                    '我的',
                  ),
                ),
              ],
              selectedFontSize: 12.0,
              currentIndex: _selectIndex,
              selectedItemColor: ColorValue.colorTheme,
              type: BottomNavigationBarType.fixed,
              onTap: onItemTapped,
            ),
            GestureDetector(
              onTap: _onClick,
              child: CircleAvatar(
                radius: 20,
                backgroundColor: Theme.of(context).accentColor,
                child: Container(
                  child: Icon(
                    Icons.add,
                    color: Colors.white,
                  ),
                ),
              ),
            )
          ],
        ),

这种写法的显示效果是符合需求的，但是点击有点击事件，但没有点击的效果，可能再需要添加点击的效果的代码，这样感觉比较麻烦，有没有简单一点的方法呢？

最终的方案是只使用bottomNavigationBar，其实一开始就想过这种方案，但是一开始对BottomNavigationBarItem不熟悉，一开始这样写的

BottomNavigationBarItem(
              icon: Image.asset(
                "assets/images/tab_add_equipment.png",
              ),
              title: Text(""),
            ),

因为title不需要，只有一张图片，但是title不写又会报错，所以想着为“”应该可以符合要求的，但是这样的效果是图片是上面，下面是空了一块，并不是居中显示的，后面偶然看到一篇文章（https://www.ucloud.cn/yun/7253.html 非常感谢！）提供了一种方法，解决了不居中的问题：

 BottomNavigationBarItem(
                icon: Image.asset(
                  "assets/images/tab_add_equipment.png",
                ),
                title: new Container(),
                backgroundColor: Colors.white),

所以最终的写法是：

bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Image.asset(
              "assets/images/tab_equipment_item.png",
              width: 20,
              height: 20,
            ),
            activeIcon: Image.asset(
              "assets/images/tab_equipment_click.png",
              width: 20,
              height: 20,
            ),
            title: Text(
              '设备',
            ),
          ),
          BottomNavigationBarItem(
            icon: Image.asset(
              "assets/images/tab_monitoring_item.png",
              width: 20,
              height: 20,
            ),
            activeIcon: Image.asset(
              "assets/images/tab_monitoring_click.png",
              width: 20,
              height: 20,
            ),
            title: Text(
              '监测',
            ),
          ),
          BottomNavigationBarItem(
              icon: Image.asset(
                "assets/images/tab_add_equipment.png",
              ),
              title: new Container(),
              backgroundColor: Colors.white),
          BottomNavigationBarItem(
            icon: Image.asset(
              "assets/images/tab_iec_item.png",
              width: 20,
              height: 20,
            ),
            activeIcon: Image.asset(
              "assets/images/tab_iec_click.png",
              width: 20,
              height: 20,
            ),
            title: Text(
              '生态链',
            ),
          ),
          BottomNavigationBarItem(
            icon: Image.asset(
              "assets/images/tab_my_item.png",
              width: 20,
              height: 20,
            ),
            activeIcon: Image.asset(
              "assets/images/tab_my_click.png",
              width: 20,
              height: 20,
            ),
            title: Text(
              '我的',
            ),
          ),
        ],
        selectedFontSize: 12.0,//解决选中时字体会放大问题
        currentIndex: _selectIndex,
        selectedItemColor: ColorValue.colorTheme,
        type: BottomNavigationBarType.fixed,
        onTap: onItemTapped,
      ),

完美解决