Flutter StatefulWidget调用setState后变量未更新无法切换TabBar内容

问题根因 #

• 初始版本中TabBar的onTap回调仅修改了count变量的值，没有调用setState触发页面重绘，所以UI不会更新
• 你使用DefaultTabController的同时自行维护选中索引，逻辑冗余，且tabsCat列表仅有2个元素，但TabBar配置了4个选项卡，切换到第3、4个tab时会触发数组越界异常
• 两个PageView共用同一个_pageController，会导致滑动冲突

修正方案 #

1. 简化状态管理逻辑，移除不必要的getter/setter、冗余方法 #

直接在类中定义选中索引变量，每个PageView单独配置控制器避免冲突：

class _HomeScreenState extends State<HomeScreen> {
  // 语义化存储当前选中的tab索引
  int selectedTabIndex = 0;
  // 每个PageView单独配控制器，避免滑动冲突
  final List<PageController> _pageControllers = [
    PageController(viewportFraction: 0.877),
    PageController(viewportFraction: 0.877),
    // 后续新增tab对应的PageView也同步补充对应控制器即可
  ];

  @override
  void dispose() {
    // 销毁控制器避免内存泄漏
    for (var controller in _pageControllers) {
      controller.dispose();
    }
    super.dispose();
  }

2. 修改TabBar的onTap逻辑 #

直接在回调中调用setState更新状态触发重绘：

onTap: (index){
  setState(() {
    selectedTabIndex = index;
  });
},

3. 补全tabsCat列表内容 #

根据你的业务需求补全后2个tab对应的PageView内容，避免索引越界

4. 修改展示容器和指示器的关联逻辑 #

// 展示当前选中tab对应的PageView
Container(
  height: 218.4,
  margin: EdgeInsets.only(top: 16),
  child: tabsCat[selectedTabIndex],
),
// 指示器绑定当前选中PageView对应的控制器
Padding(
  padding: EdgeInsets.only(left: 28.8, top: 28.8),
  child: SmoothPageIndicator(
    controller: _pageControllers[selectedTabIndex],
    count: recommendations.length,
    effect: ExpandingDotsEffect(
        activeDotColor: Color(0xFF8a8a8a),
        dotColor: Color(0xFFababab),
        dotHeight: 4.8,
        dotWidth: 6,
        spacing: 4.8),
  ),
),

内容的提问来源于stack exchange，提问作者NabsDev