六、Flutter自定义Tabbar

最新推荐文章于 2024-08-13 10:51:12 发布

星星编程888

最新推荐文章于 2024-08-13 10:51:12 发布

阅读量3k

点赞数

分类专栏： Flutter 文章标签： Flutter iOS Android 前端跨平台

本文链接：https://blog.csdn.net/qq_14949409/article/details/97030658

版权

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

摘要由CSDN通过智能技术生成

目录
一、效果展示
二、底部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];