如何用wp做企业网站,成都网站制作龙兵科技,90设计网官网首页,eclips怎么做网站flutter 自定义TabBar 【top 0 级别】 前言一、基础widget二、tab 标签三、barView总结 前言 在日常开发中#xff0c;tab 标签选项#xff0c;是一个我们特别常用的一个组件了#xff0c;往往我们在一个项目中#xff0c;有很多地方会使用到它#xff0c;每次单独去写tab 标签选项是一个我们特别常用的一个组件了往往我们在一个项目中有很多地方会使用到它每次单独去写真的是太繁琐这里我会定义一个通用的tab 选择器喜欢的朋友可以拿去试试 一、基础widget
直接先上代码
class YSTabbarWidget extends StatefulWidget {/// tabListfinal ListString tabs;/// 是否可滑动 (居左)final bool? isScrollable;/// 高亮文字大小final double? textSize;/// 非高亮文字大小final double? unTextSize;/// 小线颜色final Color? tabColors;/// 文字高亮颜色final Color? labelColor;/// 非高亮文字颜色final Color? unselectedLabelColor;/// controller 必传final TabController? controller;/// tab间距final double? horizontal;/// 下划线颜色根据文字大小 根据tab大小final double lineBottom;final TabBarIndicatorSize? indicatorSize;/// page Listfinal ListWidget tabbarViewList;final Function(int)? didSelectIndex;/// 是否显示分割线final bool? showLine;const YSTabbarWidget({Key? key,required this.tabs,required this.controller,this.tabbarViewList const [],this.unselectedLabelColor,this.isScrollable,this.textSize 16.0,this.unTextSize 16.0,this.tabColors,this.labelColor,this.horizontal,this.lineBottom 0,this.indicatorSize,this.didSelectIndex,this.showLine true}): super(key: key);overrideStateYSTabbarWidget createState() _YSTabbarWidgetState();
}class _YSTabbarWidgetState extends StateYSTabbarWidget {overridevoid initState() {// TODO: implement initStatesuper.initState();}overrideWidget build(BuildContext context) {return Column(// mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.start,mainAxisSize: MainAxisSize.min,children: [getTabbarWidget(),widget.showLine true? Container(height: 0.5,color: const Color(0xffe5e5e5),): Container(),getTabbarViewWidget(),],);}
}通过上面的代码我们可以看到这里定义了很多属性当然每个属性都有注释进行解释这里就不赘述了。
二、tab 标签
上面的代码中我们可以看到这个getTabbarWidget() 自定义的组件它就是我们需要自定义的一个tab 按钮部分了
Widget getTabbarWidget() {return TabBar(isScrollable: widget.isScrollable ?? false,controller: widget.controller,indicatorColor: widget.tabColors ?? Colours.app_main,// indicatorWeight:10,indicatorSize: widget.indicatorSize ?? TabBarIndicatorSize.label,indicatorPadding: const EdgeInsets.only(left: 0),indicator: UnderlineTabIndicator(insets: EdgeInsets.only(bottom: widget.lineBottom),borderRadius: const BorderRadius.all(Radius.circular(1)),borderSide: BorderSide(color: widget.tabColors ?? Colours.app_main,width: 2, //高度),),labelColor: widget.labelColor ?? Colours.app_main,unselectedLabelColor: widget.unselectedLabelColor ?? Colours.textBlack3,labelPadding:EdgeInsets.symmetric(horizontal: widget.horizontal ?? 20.w),labelStyle: TextStyle(fontSize: widget.textSize,fontWeight: FontWeight.w600,),unselectedLabelStyle: TextStyle(fontSize: widget.unTextSize),onTap: (value) {if (widget.didSelectIndex ! null) {widget.didSelectIndex!(value);}},tabs: widget.tabs.mapTab((String tab) {return Tab(text: tab,);}).toList());
}结合篇头的代码及注释我们可以简单的理解上面的每一行代码。这里需要说明的是如果你想自定义tab 的样式或者是其他的一些功能需求都可以直接在上面的代码中进行修改调整。
有人可能会有疑问代码的中的showLine到底判断的是啥
widget.showLine true? Container(height: 0.5,color: const Color(0xffe5e5e5),): Container(),其实它就是一个分界线可以根据自己的需求进行调整样式也可以根据showLine 参数进行判断是否需要添加分界线。
三、barView
既然我们封装的使用通用的tabbar那么barview 肯定是必不可少的接来下我们看看getTabbarViewWidget() 这个自定义的组件。
Widget getTabbarViewWidget() {if(widget.tabbarViewList.isNotEmpty){return Expanded(child: TabBarView(controller: widget.controller,children: widget.tabbarViewList,),);}else{return Container();}
}getTabbarViewWidget 的代码就比较少了简单的来说就是穿一个个上下文controller 再传入你的widget 就可以了。
看到这里你学废了没 总结
简简单单一个widget复制粘贴直接用废话不多说啥没有写怎么调用不知道怎么调用你还是去看看前面的文章吧。
