Flutter中滑动切换TabBarView时如何修改Tabs组件的形状？

存在的问题点 #

• 没有给TabController添加状态监听，滑动切换TabBarView时没有触发UI重绘逻辑，只有点击Tab触发onTap回调时才会执行重绘
• onTap回调内的赋值逻辑写反：你写的value = _index是把当前已有的索引值覆盖回调返回的新索引，完全没有实现更新选中索引的效果
• 直接在build方法内对_index赋值，会受到TabController滑动过程中索引渐变的影响，可能出现形状错乱

修复代码 #

import 'package:flutter/material.dart';

class Demo extends StatefulWidget with PreferredSizeWidget {
  @override
  _DemoState createState() => _DemoState();

  @override
  Size get preferredSize => AppBar().preferredSize;
}

class _DemoState extends State<Demo> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  late int _index;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this, initialIndex: 1);
    _index = _tabController.index;
    // 添加Tab切换监听
    _tabController.addListener(() {
      // 只在切换完成后更新索引，避免滑动过程中频繁重绘
      if (_tabController.indexIsChanging) {
        setState(() {
          _index = _tabController.index;
        });
      }
    });
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: TabBarView(
          controller: _tabController,
          children: const [
            Pages(pageName: "Page 0"),
            Pages(pageName: "Page 1"),
            Pages(pageName: "Page 2"),
          ],
        ),
        appBar: AppBar(
          elevation: 0.0,
          bottom: TabBar(
            labelColor: Colors.black,
            indicator: BoxDecoration(
              color: Colors.white,
              borderRadius: _index == 0
                  ? const BorderRadius.only(topRight: Radius.circular(10.0))
                  : _index == 1
                      ? const BorderRadius.only(
                          topLeft: Radius.circular(10.0),
                          topRight: Radius.circular(10.0))
                      : const BorderRadius.only(topLeft: Radius.circular(10.0)),
            ),
            controller: _tabController,
            tabs: const [
              Tab(text: "Tab0"),
              Tab(text: "Tab1"),
              Tab(text: "Tab2"),
            ],
          ),
        ),
      ),
    );
  }
}

class Pages extends StatelessWidget {
  final String pageName;
  const Pages({super.key, required this.pageName});
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text(
          pageName,
          style: const TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.bold,
            fontSize: 60.0,
          ),
        ),
      ),
    );
  }
}

补充说明 #

加了TabController的监听之后，不管是点击Tab切换还是滑动页面切换，都会触发索引更新和UI重绘，你要的Tabs形状修改效果两种切换方式都会生效。同时优化了不必要的冗余代码，添加了空安全适配的相关关键字，可直接运行测试。

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