六、Flutter自定义Tabbar

Flutter自定义Tabbar实现

最新推荐文章于 2024-11-05 13:57:19 发布

原创

最新推荐文章于 2024-11-05 13:57:19 发布 · 3.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter #iOS #Android #前端 #跨平台

本文介绍了在Flutter中创建自定义Tabbar的方法，包括底部Tabbar和顶部Tabbar的实现。通过实例展示了如何配置底部导航属性，处理点击事件以及加载本地图片。顶部Tabbar则相对简单，使用DefaultTabController组件，结合AppBar组件实现。文章提供了详细的步骤和代码示例。

目录
一、效果展示
二、底部Tabbar
三、顶部Tabbar

一、效果展示
底部Tabbar切换和顶部Tabbar切换在工作中使用频率都比较高，Flutter很人性化，这些组件都提供好了，我们只需要了解一下如何使用就好了。下面是我用宝贵的周末时间做的一个Demo,请看效果。有什么好的建议，可以在下面留言交流一下，共同学习共同进步。

二、底部Tabbar
重新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