如何让ScrollableTabRow指示器与HorizontalPager拖拽滚动同步？

你当前的问题在于指示器仅依赖pagerState.currentPage获取固定位置，没有响应拖拽过程中的实时偏移量。要实现拖拽时指示器同步移动，需要结合pagerState的currentPageOffsetFraction属性计算动态偏移。

修改后的完整代码 #

// 记得导入lerp函数：import androidx.compose.ui.unit.lerp

ScrollableTabRow(
    selectedTabIndex = pagerState.currentPage,
    indicator = { tabPositions ->
        val currentTab = tabPositions[pagerState.currentPage]
        // 获取下一个Tab的位置（拖拽到下一页时用到）
        val nextTab = tabPositions.getOrNull(pagerState.currentPage + 1)
        // 获取拖拽偏移比例，范围0~1（从当前页拖向目标页的进度）
        val dragOffset = pagerState.currentPageOffsetFraction

        // 计算指示器的实时偏移量
        val indicatorLeft = if (dragOffset > 0 && nextTab != null) {
            lerp(currentTab.left, nextTab.left, dragOffset)
        } else {
            currentTab.left
        }

        TabRowDefaults.SecondaryIndicator(
            modifier = Modifier
                .offset(x = indicatorLeft)
                .width(currentTab.width),
            // 可自定义指示器颜色
            color = MaterialTheme.colorScheme.primary
        )
    },
    modifier = Modifier.fillMaxWidth(),
    containerColor = getTopBarColor()
) {
    data.forEachIndexed { index, _ ->
        Tab(
            text = { Text(tabTitle, maxLines = 1) },
            selected = pagerState.currentPage == index,
            onClick = {
                scope.launch {
                    pagerState.animateScrollToPage(index)
                }
            }
        )
    }
}

HorizontalPager(
    state = pagerState,
    modifier = Modifier
        .fillMaxWidth()
        .weight(1f)
) { page ->
    // 页面内容实现
}

关键修改说明 #

1. 选中状态与Pager绑定：直接用pagerState.currentPage替代自定义的selectedTabIndex.value，确保Tab选中状态和Pager页面完全同步。
2. 动态计算指示器偏移：通过currentPageOffsetFraction获取拖拽进度，结合lerp函数线性插值计算指示器的实时位置，实现拖拽过程中的平滑跟随。
3. 手动控制指示器尺寸与位置：用Modifier.offset设置指示器的X轴偏移，保持宽度与当前Tab一致，确保视觉上的匹配。

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