flutterTabBarList自定义样式实现,AutomaticKeepAliveClientMixin每次切换页面不需要重新加载

TabBarList

import &＃39;package:ZyFlutter/theme/font.dart&＃39;;
import &＃39;package:flutter/material.dart&＃39;;
import &＃39;package:flutter_screenutil/flutter_screenutil.dart&＃39;;/// 顶部tabBar
class TabBarList extends StatefulWidget {// 标题final Widget title;// 右侧功能区域final List actions;// 左侧区域final Widget leading;// 内容区域final List child;// tab列表final List tabs;TabBarList({Key key, this.title, this.actions, this.leading, this.child, this.tabs}): super(key: key);&＃64;override_TabBarListState createState() &＃61;> _TabBarListState();
}class _TabBarListState extends Statewith SingleTickerProviderStateMixin, AutomaticKeepAliveClientMixin {// Tab控制器TabController _tabController;int _tabIndex &＃61; 0;List myTabs &＃61; [];// 初始化&＃64;overridevoid initState() {super.initState();_tabController &＃61; TabController(length: widget.tabs.length, vsync: this);setState(() {myTabs &＃61; widget.tabs;});}&＃64;overridevoid dispose() {super.dispose();_tabController.dispose();}&＃64;overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(leading: widget.leading,title: widget.title,actions: widget.actions,shadowColor: Colors.white,bottom: TabBar(indicator: BoxDecoration(border: Border(bottom: BorderSide(color: Theme.of(context).toggleableActiveColor,width: 3.sp,style: BorderStyle.solid),),),tabs: myTabs,indicatorSize: TabBarIndicatorSize.label,labelStyle: TextStyle(color: Theme.of(context).colorScheme.primary,fontSize: Font.firstLevelTitle,fontWeight: FontWeight.bold),unselectedLabelStyle: TextStyle(color: Theme.of(context).colorScheme.primaryVariant,fontSize: Font.secondaryTitle),controller: _tabController,),),body: TabBarView(controller: _tabController,children: widget.child,),);}&＃64;overridebool get wantKeepAlive &＃61;> true;
}


使用

import &＃39;package:ZyFlutter/components/TabBarList.dart&＃39;;
import &＃39;package:flutter/material.dart&＃39;;
import &＃39;package:flutter_screenutil/flutter_screenutil.dart&＃39;;
import &＃39;package:tapped/tapped.dart&＃39;;class Village extends StatefulWidget {&＃64;override_VillageState createState() &＃61;> _VillageState();
}class _VillageState extends State {List list &＃61; [Tab(text: "精选",),Tab(text: "本村",),Tab(text: "关注",),];&＃64;overrideWidget build(BuildContext context) {return TabBarList(tabs: list,title: Center(child: Text("村里"),),child: [Text("123"), Text("999"), Text("123")],actions: [Padding(child: Tapped(child: Icon(Icons.camera_alt,color: Theme.of(context).colorScheme.primaryVariant,),),padding: EdgeInsets.only(right: 16.sp),)],);}
}