Flutter TabBar与TabBarView联动及获取当前点击栏目索引_flutter tabbarview和tabbar联动-优快云博客

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>();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    //栏目滑动索引改变
    _scrollController = ScrollController(onDetach: (ScrollPosition position) {
      if (_scaffoldKey.currentContext != null) {
        final controller =
            DefaultTabController.of(_scaffoldKey.currentContext!);
        controller.addListener(() {
          if (co