Flutter ListView自定义TabBar如何实现点击Tab后滚动到屏幕居中位置

要实现点击Tab后自动滚动到屏幕居中，核心逻辑是让被点击Tab的中心点与屏幕中心点对齐，正确的pos计算逻辑如下：

1. 先获取被点击Tab在整个可滚动内容中的绝对X坐标：该坐标等于当前已滚动的偏移量 + Tab在当前可视区域内的X坐标
2. 计算Tab的中心点坐标，用绝对X坐标加上Tab自身宽度的一半
3. 要让Tab中心点对齐屏幕中心点，滚动偏移量 = Tab中心点坐标 - 屏幕宽度的一半

完整实现代码如下：

GlobalKey key = gkey[i];
    
RenderBox box = key.currentContext?.findRenderObject() as RenderBox;
double tabWidth = box.size.width;
// 获取Tab在当前可视区域的X坐标
double tabScreenDx = box.localToGlobal(Offset.zero).dx;
    
ScrollController scroll = _categoryScrollController;
double maxScroll = scroll.position.maxScrollExtent;
double currentScroll = scroll.position.pixels;
    
double screenWidth = Get.width;

// 核心计算逻辑
double tabAbsoluteX = currentScroll + tabScreenDx;
double tabCenterX = tabAbsoluteX + tabWidth / 2;
double pos = tabCenterX - screenWidth / 2;

// 边界处理保持不变
_categoryScrollController.animateTo(pos < 0 ? 0 : pos > maxScroll ? maxScroll : pos, duration: Duration(milliseconds: 250), curve: Curves.ease);

注意事项 #

• 需确保获取RenderBox时页面已经完成布局渲染，点击事件中触发该逻辑通常不会有问题
• 如果存在横竖屏切换场景，需注意更新屏幕宽度取值

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