首页 > 建站教程 > APP开发,混合APP >  Flutter bottomNavigationBar和DefaultTabController实战正文

Flutter bottomNavigationBar和DefaultTabController实战

这是转载自简书星星编程的一篇博文,感谢分享。

本文通过一个案例,展示了Flutter通过bottomNavigationBar和DefaultTabController组件实现底部tab栏和顶部tab栏的实现:

下图是最终效果:



可以看到,顶部有搜索框和tabbar,使用了自定义AppBar配合DefaultTabController实现,底部为常见的bottomNavigationBar tab栏。

一、通过bottomNavigationBar实现底部:
    重新build方法会返回一个Scaffold组件,在这个组件下面添加底部导航属性bottomNavigationBar,onTap事件实现点击底部导航栏页面之间的切换和状态改变。因为界面有变化,所以这里使用的是动态组件StatefulWidget。
@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(244, 245, 245, 1.0),
      bottomNavigationBar: BottomNavigationBar(
        type:BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        items:_bottomTabs,
        onTap: (index){
          setState(() {
           currentIndex = index;
           currentPage = _tabs[currentIndex];
          });
        },
       fixedColor: Colors.green,
      ),
      body:currentPage
    );
}
    _bottomTabs是定义的底部Tabbar的List<BottomNavigationBarItem>,包含了Tabbar的每个item。item有默认icon和选择的activeIcon,这里使用的都是加载的本地图片,加载本地图片需要以下配置。

    1、以当前Demo为例,建立一个assets文件夹images,下面建2.0x和3.0x两个文件夹,用来放2倍图和3倍图,另外直接在images文件夹下放一倍图。



    2、需要在pubspec.yaml文件中声明每张图片。



    3、Tabbar每个item的icon和activeIcon加载本地图。
final List<BottomNavigationBarItem> _bottomTabs = [
    BottomNavigationBarItem(
      icon:Image.asset("images/ic_tab_home_normal.png",fit: BoxFit.cover,width: 40,height: 40,),
      activeIcon:Image.asset("images/ic_tab_home_active.png",fit: BoxFit.cover,width: 40,height: 40,),
      title:Text('首页')
    ),
    BottomNavigationBarItem(
      icon:Image.asset("images/ic_tab_subject_normal.png",fit: BoxFit.cover,width: 40,height: 40,),
      activeIcon:Image.asset("images/ic_tab_subject_active.png",fit: BoxFit.cover,width: 40,height: 40,),
      title:Text('书影音')
    ),
    BottomNavigationBarItem(
      icon:Image.asset("images/ic_tab_group_normal.png",fit: BoxFit.cover,width: 40,height: 40,),
      activeIcon:Image.asset("images/ic_tab_group_active.png",fit: BoxFit.cover,width: 40,height: 40,),
      title:Text('小组')
    ),
     BottomNavigationBarItem(
      icon:Image.asset("images/ic_tab_shiji_normal.png",fit: BoxFit.cover,width: 40,height: 40,),
      activeIcon:Image.asset("images/ic_tab_shiji_active.png",fit: BoxFit.cover,width: 40,height: 40,),
      title:Text('市集')
    ),
     BottomNavigationBarItem(
      icon:Image.asset("images/ic_tab_profile_normal.png",fit: BoxFit.cover,width: 40,height: 40,),
      activeIcon: Image.asset("images/ic_tab_profile_active.png",fit: BoxFit.cover,width: 40,height: 40,),
      title:Text('我的')
    )
];
    _tabs是Tabbar所有页面的集合:
final List _tabs = [
    TopBarPage(),
    AudioBook(),
    Team(),
    Fair(),
    Mine()
];
    在initState初始化currentPage,显示首页:
@override
void initState() {
    super.initState();
    currentPage=_tabs[currentIndex];
}
    切换Tabbar实现onTap刷新状态并更改currentPage渲染页面。

二、顶部Tabbar
    顶部Tabbar相对于底部Tabbar简单一些,顶部Tabbar切换时不需要手动改变状态,所以这里使用StatelessWidget。顶部Tabbar使用DefaultTabController组件,声明切换item的个数length属性,并保证与tabs和TabBarView的个数一致,否则会报错。
    AppBar组件下的Title也是一个组件,这里添加一个自定义的搜索组件SearchTextFieldWidget,这里就不过多介绍了。
@override
Widget build(BuildContext context) {
    return DefaultTabController(
      length: 6,
      child: Scaffold(
        appBar: AppBar(
          title: SearchTextFieldWidget(
              hintText: "用一部电影来形容你的2019",
              onSubmitted: (searchContent) {
                
              },
            ),
         backgroundColor: Colors.green,
          bottom: TabBar(
            indicatorColor: Colors.white,
            tabs: <Widget>[
              Tab(
                text: "电影",
              ),
              Tab(
                text: "电视",
              ),
               Tab(
                text: "综艺",
              ),
               Tab(
                text: "读书",
              ),
              Tab(
                text: "音乐",
              ),
              Tab(
                text: "同城",
              )
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[Home(), Home(), Home(), Home(), Home(), Home()],
        ),
      ),
    );
}