Flutter TabBar与TabBarView联动及获取当前点击栏目索引

     TabBar还有TabBarView都是谷歌flutter官方组件库——Material组件库提供的组件，其中TabBar用于导航切换，TabBarView则是配合其切换显示的对应的视图，官网参考地址：TabBarView class - material library - Dart API。

        实现一体联动有两种实现方式：使用默认控制器(DefaultTabController)和自定义控制器。使用自定义控制器灵活性更高，但是需要指定TabController的length属性，但有些情况下栏目的实际数据是从网络上异步加载读取的，这个TabController的length无法动态更新或后面重新指定，非常扯淡,具体实现参考：flutter 之 TabBar、TabBarView的使用 - 简书。

      本文主要介绍在使用DefaultTabController下，实现获取点击当前栏目的索引，包括点击TabBar和滑动TabBarView以及视图状态保持，示例如下：

  late int _selectIndex = 0;late final ScrollController _scrollController;late final NewsPageViewModel _vm = NewsPageViewModel();late final _scaffoldKey = GlobalKey<_NewsPageViewState>();@overridevoid initState() {// TODO: implement initStatesuper.initState();//栏目滑动索引改变_scrollController = ScrollController(onDetach: (ScrollPosition position) {if (_scaffoldKey.currentContext != null) {final controller =DefaultTabController.of(_scaffoldKey.currentContext!);controller.addListener(() {if (controller.index.toDouble() == controller.animation?.value) {//loadListDataFor(controller.index);debugPrint(controller.index);}});}});}@overrideWidget build(BuildContext context) {// TODO: implement buildreturn BaseView<NewsPageViewModel>(viewModel: _vm,build: (context, viewModel, child) {if (viewModel.state == ViewState.Busy) {return BaseView.loadingWidget();} else {return DefaultTabController(initialIndex: _selectIndex,length: viewModel.arrCategory.length,child: NestedScrollView(controller: _scrollController,headerSliverBuilder:(BuildContext context, bool innerBoxIsScrolled) {return <Widget>[SliverOverlapAbsorber(handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),sliver: SliverAppBar(title: Utils.shareInstance.customPageTitle('资讯'),//标题横向间距titleSpacing: 15,//左侧的图标或文字，多为返回箭头leading: null,//左边按钮的宽度leadingWidth: 15,//居中centerTitle: false,//标题栏是否固定pinned: true,//滑动时是否悬浮floating: false,//配合floating使用snap: false,//是否显示在状态栏的下面,false就会占领状态栏的高度primary: true,//设置分栏区域上面的高度// expandedHeight: 0,elevation: 0,//是否显示阴影，直接取值innerBoxIsScrolled，展开不显示阴影，合并后会显示forceElevated: innerBoxIsScrolled,//自定义导航和中间内容的展示flexibleSpace: null,//导航栏背景色backgroundColor: K_APP_NAVIGATION_BACKGROUND_COLOR,//TabBar 分栏标题bottom: _setCategoryTabBar(viewModel),),)];},//分栏展示的页面信息body: _setCategoryTabBarView(context, viewModel),));}},onModelReady: (viewModel) {//加载栏目viewModel.categoryLoad(context, isLoading: false);});}@overridevoid dispose() {_scrollController.dispose();// TODO: implement disposesuper.dispose();}//MARK: - 扩展
extension on _NewsPageViewState {//分栏菜单TabBar _setCategoryTabBar(NewsPageViewModel viewModel) {return TabBar(key: _scaffoldKey,//设置对齐方式(否则左边有空白)tabAlignment: TabAlignment.start,//是否允许滚动isScrollable: true,//未选中的颜色unselectedLabelColor: Utils.shareInstance.hexToInt(0x505050),//未选中的样式unselectedLabelStyle: const TextStyle(fontSize: 15),//选中的颜色labelColor: K_APP_TINT_COLOR,//选中的样式labelStyle: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),//底部滑动条样式indicatorSize: TabBarIndicatorSize.label,//底部滑动条颜色indicatorColor: K_APP_TINT_COLOR,//菜单项目tabs: viewModel.arrCategory.map((item) {return Tab(text: item.name);}).toList(),//点击事件onTap: (index) {debugPrint(index);//loadListDataFor(index);setState(() {_selectIndex = index;});},);}// tabBar 分栏菜单各个页面Widget _setCategoryTabBarView(BuildContext context, NewsPageViewModel viewModel) {return TabBarView(children: viewModel.arrCategory.map((item) {//设置UIreturn SafeArea(top: false,bottom: false,child: Builder(builder: (BuildContext context) {return CustomScrollView(slivers: [SliverOverlapInjector(handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),),SliverPadding(padding: EdgeInsets.zero,sliver: SliverFixedExtentList(delegate: SliverChildBuilderDelegate((BuildContext context, int index) {final m = viewModel.arrList[index];if (m.className == '快讯') {//7x24快讯return NewsPageViewInformationCell(index, m, context, viewModel);}return NewsPageViewCell(index, m, context, viewModel);}, childCount: viewModel.arrList.length),itemExtent: 50.0 //item高度或宽度，取决于滑动方向),)],);},));}).toList());}}

上面方法进过实际测试，可以实现点击和滑动时获取当前栏目的索引，以便根据索引执行加载当前页面的栏目数据的业务逻辑。随之会产生新的问题就是栏目来回切换没有保持页面的状态，会重复加载数据，解决思路是借助 AutomaticKeepAliveClientMixin 并设置 wantKeepAlive 为true,在PageView和PageController组合中同样适用，效果如下：

86_1720350605

参考Demo,日拱一卒,持续更新