Flutter BottomNavigationBar底部导航栏

基本上每个app都含有一个底部导航栏，Flutter也提供了相关控件，本博主要从两个方面讲解底部导航栏BottomNavigationBar

• BottomNavigationBar的使用方法
• 解决BottomNavigationBar切换时状态重置问题

首先看看BottomNavigationBar的使用方法，先上代码

void main() => runApp(App());
class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title',
      theme: ThemeData(
        primaryColor: Color(0xFF2B9242),
      ),
      home: MainPage()
    );
  }
}
class MainPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _selectedTab = 0;
  @override
  void initState() {
    super.initState();
  }
  @override
  void dispose() {
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: _buildContent(),
      bottomNavigationBar:
          _BottomTabs(selectedTabIndex: _selectedTab, onTap: _tabSelected),
    );
  }
 _buildContent() {
    return Text('this is content');
 }
  _tabSelected(int tabIndex) {
    setState(() {
   	// update content
    });
  }
}

class _BottomTabs extends StatelessWidget {
  _BottomTabs({@required this.selectedTabIndex, @required this.onTap});

  final int selectedTabIndex;
  final ValueChanged<int> onTap;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return BottomNavigationBar(
        onTap: this.onTap,
        type: BottomNavigationBarType.fixed,
        fixedColor: Colors.green.shade800,
        currentIndex: selectedTabIndex,
        iconSize: 28,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            title: Text("首页"),
            icon: ImageIcon(AssetImage("image/image1.png")),
          ),
          BottomNavigationBarItem(
              title: Text("采购/销售"),
              icon: ImageIcon(AssetImage("image/image2.png"))),
          BottomNavigationBarItem(
            title: Text("出入库"),
            icon: ImageIcon(AssetImage("image/image3.png")),
          ),
          BottomNavigationBarItem(
            title: Text("基础资料"),
            icon: ImageIcon(AssetImage("image/image4.png")),
          ),
          BottomNavigationBarItem(
              title: Text("待办"),
              icon: ImageIcon(AssetImage("image/image5.png"))),
        ]);
  }
}

简单起见， 暂时还没处理根据tab切换内容， BottomNavigationBar的构建有一个type，我们一般使用fixed类型，使用fixed类型时，fixedColor就表示选中时的文字和图片颜色，切换时如果没设置activeIcon，会将图标使用fixedColor进行tint处理，选中时的tab文字会变大，这个我也没找到保持一样大的方法，还有一点值得注意的地方就是icon一般需要使用Icon或ImageIcon，否则会使BottomNavigationBar高度不正常，下面我们来处理页面切换，我们先用TabbarView来显示内容部分，替换_buildContent方法的内容

_buildContent() {
    return TabBarView(
      controller: _tabController,
      physics: const NeverScrollableScrollPhysics(),
      children: <Widget>[
        HomePage(),
        Center(
          child: Text(
            "Order",
            style: TextStyle(
              fontSize: 15,
            ),
          ),
        ),
        Center(
          child: Text("Warehouse"),
        ),
        Center(
          child: Text("Base Infra"),
        ),
        Center(
          child: Text("Pending"),
        ),
      ],
    );
  }

TabBarView构建需要用到TabController, 通过设置TabController的index来切换对应的页面
子控件相应的BottomNavigationBar切换时的页面, 先定义TabController

class _MainPageState extends State<MainPage>
    with SingleTickerProviderStateMixin {
  TabController _tabController;
  @override
  void initState() {
    super.initState();

    _tabController = TabController(length: 5, vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }
  // ignore othe non related code
}

下面我们来实现BottomNavigationBar切换时的回调方法

  _tabSelected(int tabIndex) {
    setState(() {
      _tabController.index = tabIndex;
      _selectedTab = tabIndex;
    });
  }

到此我们就实现了BottomNavigationBar页面的切换功能， 大家可能注意到我构建的第一个页面用的是HomePage控件，我这里还没定义，先可以使用Text代替，下面为了显示BottomNavigationBar + TabbarView页面状态重置的现象，我们来构建一个StatefullWidget的控件HomePage

class HomePage extends StatefulWidget {
  HomePage();

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

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: FlatButton(
          onPressed: () {
            Navigator.of(context).push(MaterialPageRoute(
                builder: (_) => Scaffold(
                      appBar: AppBar(elevation: 0,),
                      body: Center(
                        child: Text("Back"),
                      ),
                    )));
          },
          child: Text("Home")),
    );
  }

  @override
  void dispose() {
    super.dispose();
  }
}

内容很简单，我们在dispose方法加一个断点，会发现每次切换到其他页时都会调用到，说明状态重置了，如果我们显示静态页面倒也没我们问题，但涉及到网络请求数据时会发现都会重复请求一遍，那么问题来了，我们该怎么解决呢？ 最简单的就是页面的State类 mixin AutomaticKeepAliveClientMixin

class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin {

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Center(
      child: FlatButton(
          onPressed: () {
            Navigator.of(context).push(MaterialPageRoute(
                builder: (_) => Scaffold(
                      appBar: AppBar(elevation: 0,),
                      body: Center(
                        child: Text("Back"),
                      ),
                    )));
          },
          child: Text("Home")),
    );
  }

  @override
  void dispose() {
    super.dispose();
  }
}

再次运行切换到其他页面，dispose就不会调用到了，说明没有重置State，mixin AutomaticKeepAliveClientMixin 主要注意两点

• wantKeepAlive 重载返回true
• build方法先调用super.build(context);

第二种解决方法就是内容页不用TabbarView管理，改用IndexedStack，我们重新实现_buildContent()方法

  _buildContent() {
    return IndexedStack(
      index: _selectedTab,
      children: <Widget>[
        HomePage(),
        Center(
          child: Text(
            "Order",
            style: TextStyle(
              fontSize: 15,
            ),
          ),
        ),
        Center(
          child: Text("Warehouse"),
        ),
        Center(
          child: Text("Base Infra"),
        ),
        Center(
          child: Text("Pending"),
        ),
      ],
    );
  }

IndexedStack控件显示索引为index的child Widget，其他的不显示， Stack控件通过层叠的形式显示所有子控件，学过android的可能已经发现它和FrameLayout布局类似，其实我们也可以通过
Offstage + Stack实现类似的效果，具体怎么用大家自己试试，BottomNavigationBar就讲到这里，如果理解不对的地方欢迎大家指正，如需转载请注明出处