Flutter实现Tab切换页面

最新推荐文章于 2024-07-15 11:59:01 发布

C v lie

最新推荐文章于 2024-07-15 11:59:01 发布

阅读量1.3w

点赞数 1

分类专栏： flutter 文章标签： flutter

本文链接：https://blog.csdn.net/u010221508/article/details/88959742

版权

本文介绍了如何在Flutter中实现Tab切换页面，通过自定义TabBarWidget，将标签与页面同步变化。内容包括抽屉页面的实现，并提供了关键代码段和Demo源码链接。

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

先看效果图

实现过程分析
首先自定义一个TabBarWidget

  class TabBarWidget extends StatefulWidget{
   //底部模式
   static const int BOTTOM_TAB = 1;
   //顶部模式
   static const int TOP_TAB = 2;
 
   final int type;
   //标题集合
   final List<Widget> tabItems;
   //页面集合
   final List<Widget> tabViews;
   final Color backgroundColor;
   //指示器颜色
   final Color indicatorColor;
   final Widget title;
   //抽屉widget
   final Widget drawer;
   final ValueChanged<int> onPageChanged;
 
   TabBarWidget({
     Key key,
     this.type,
     this.tabItems,
     this.tabViews,
     this.backgroundColor,
     this.indicatorColor,
     this.title,
     this.drawer,
     this.onPageChanged
   }):super(key:key);
 
   @override
   State<StatefulWidget> createState() {
     // TODO: implement createState
     return new _TabBarState(this.type, this.tabViews, this.indicatorColor, this.title, this.drawer,this.onPageChanged);
   }
 
 }
 
 //创建State对象，存储TabBarWidget的内部逻辑和变化状态
 //with表示扩展，SingleTickerProviderStateMixin是一个扩展（混合）类，它没有构造函数，只能继承自Object。
 //一个类可以有多个扩展类，扩展类可以实现方法，接口不能实现方法，只能在实现类里面实现，继承只能是单继承，这就是扩展的好处。
 //当有继承，扩展，以及类本身实现同样的功能时，方法调用的优先级是扩展类