Flutter实现TabBar程序化滚动：点击箭头仅滚动不切换标签

Flutter自带的TabBar在标签溢出时，点击默认的左右滚动箭头会自动切换到对应标签，要实现仅滚动不切换的效果，需要自定义滚动控制逻辑，以下是具体实现方法：

1. 核心思路 #

放弃依赖TabController的默认滚动切换行为，改用ScrollController手动控制TabBar的滚动，同时自定义左右箭头按钮来触发滚动操作。

2. 具体实现代码 #

初始化控制器 #

final TabController _tabController = TabController(length: 6, vsync: this);
final ScrollController _tabScrollController = ScrollController();

构建自定义TabBar布局 #

Row(
  children: [
    // 左箭头按钮
    IconButton(
      icon: const Icon(Icons.arrow_back_ios),
      onPressed: () {
        _tabScrollController.animateTo(
          _tabScrollController.offset - 120, // 每次滚动120像素，可根据标签宽度调整
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeInOut,
        );
      },
    ),
    Expanded(
      child: Scrollable(
        controller: _tabScrollController,
        axisDirection: AxisDirection.right,
        viewportBuilder: (context, position) {
          return TabBar(
            controller: _tabController,
            isScrollable: true,
            // 禁止手动滚动，仅通过按钮控制
            physics: const NeverScrollableScrollPhysics(),
            tabs: const [
              Tab(text: '标签1'),
              Tab(text: '标签2'),
              Tab(text: '标签3'),
              Tab(text: '标签4'),
              Tab(text: '标签5'),
              Tab(text: '标签6'),
            ],
          );
        },
      ),
    ),
    // 右箭头按钮
    IconButton(
      icon: const Icon(Icons.arrow_forward_ios),
      onPressed: () {
        _tabScrollController.animateTo(
          _tabScrollController.offset + 120,
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeInOut,
        );
      },
    ),
  ],
)

3. 进阶优化（精准滚动到标签） #

如果需要滚动时自动对齐到标签的边缘，可以通过获取标签的渲染尺寸来计算滚动偏移：

// 获取单个标签的宽度
double getTabWidth() {
  final renderBox = _tabKey.currentContext?.findRenderObject() as RenderBox?;
  return renderBox?.size.width ?? 100;
}

// 左箭头点击事件改为精准滚动
_tabScrollController.animateTo(
  _tabScrollController.offset - getTabWidth(),
  duration: const Duration(milliseconds: 300),
  curve: Curves.easeInOut,
);

注意点 #

• TabController仍用于管理标签的选中状态，点击标签时正常切换选中项，不影响滚动逻辑。
• 若需要保留手动滚动功能，可将NeverScrollableScrollPhysics改为默认的滚动物理效果，同时保留按钮控制逻辑。

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