如何在 flutter 的 TabBar 中制作选定的 Tab 中心

Question

在我的 TabBar 中，最多有 3 种不同宽度的选项卡。

“x月xx”最宽，“xx月”在中间，“x月”最窄。

而当标签 state 从未选中变为选中时，它会变得更宽，因为它在标题中添加了前缀“xxxx年”。

我无法为选项卡宽度设置特定值，因为如果未选中，选项卡标题可能会从“2020 年 11 月”更改为“11 月”。

我的目的是使选定的选项卡在屏幕上居中。

TabController的方法animateTo只允许滚动到一个索引而不是一个距离。 所以我复制了tabs.dart 。 我想更改_scrollToCurrentIndex()方法，它使用ScrollController将动画设置为偏移量。 有很多有用的东西（例如各种 TabOffsets、ScrollOffset、viewportWidth...），但我仍然不知道如何让滚动偏移和填充一起工作。

Answer 1

我部分成功了，这意味着选定的选项卡将滚动到中心，但 animation 很奇怪。

在class _TabBarState extends State<TabBar>我在构建 function 中找到了这个：

Widget tabBar = CustomPaint(
  painter: _indicatorPainter,
  child: _TabStyle(
    // ...
    child: _TabLabelBar(
      onPerformLayout: _saveTabOffsets,
      children: wrappedTabs,
    ),
  ),
);

在onPerformLayout: _saveTabOffsets我可以得到List<double> tabOffsets和double tabBarWidth 。 我用这些来计算滚动的距离。 但是这样一来，问题就在于：当点击一个tab时，它先绘制indicator，然后indicator从最后一个选中的tab变为新选中的tab后，tabBar滚动到居中。

我愿意接受更好的想法。