Jetpack Compose ScrollableTabRow初始加载如何避免非预期自动滚动

问题现象 #

使用ScrollableTabRow组件实现Tab导航时，需加载60个Tab项，要求组件初始加载默认选中中间位置Tab，对应指示器同步定位在中间位置。但实际运行时，Composable首次绘制完成后会触发一段非预期的自动滚动动画。
最小复现代码如下：

@Composable
@Preview
fun MinimalTabExample() {
    val tabCount = 60
    var selectedTabIndex by remember { mutableStateOf(tabCount / 2) }

    ScrollableTabRow(selectedTabIndex = selectedTabIndex) {
        repeat(tabCount) { tabNumber ->
            Tab(
                selected = selectedTabIndex == tabNumber,
                onClick = { selectedTabIndex = tabNumber },
                text = { Text(text = "Tab #$tabNumber") }
            }
        }
    }
}

业务背景 #

开发类日历应用时，需要在日期详情视图提供快速跳转相邻日期的能力，支持用户基于当前选中月份，快速切换前后1个月范围内的任意日期。

问题根因 #

该问题不属于业务实现错误，是ScrollableTabRow组件在Compose Material 1.6版本之前的固有逻辑缺陷：

• 组件内部的ScrollableTabData在首次组合时，没有在布局阶段同步设置初始滚动偏移，而是在布局完成后通过协程触发带动画的滚动逻辑，将选中项移动到可视区域合适位置。布局渲染和滚动定位两步执行的帧差，就会导致用户看到从列表开头滚动到目标位置的非预期动画。
• 触发条件固定：初始选中索引距离首屏可视范围较远、Tab总数量超出首屏可展示数量时就会复现。

解决方案 #

• 最优方案：将Compose Material依赖升级到1.6.0及以上稳定版本，官方已经修复该初始滚动逻辑问题，现有业务代码不需要做任何修改即可符合预期。
• 低版本兼容方案：如果暂时无法升级依赖，可通过以下任意一种方式规避：
  1. 自定义滚动状态传入ScrollableTabRow，首次加载时调用无动画的scrollTo方法直接定位到目标偏移位置，替换组件内部默认的animateScrollTo逻辑，该修改不影响后续用户手动切换Tab时的正常滚动动画。
  2. 固定Tab宽度场景下，提前计算初始选中项对应的滚动偏移量，在LaunchedEffect(Unit)中直接设置滚动位置，跳过动画执行过程。
  3. 视觉临时规避：首次加载时将ScrollableTabRow透明度设为0，监听滚动状态直到滚动位置稳定到目标值后，再将组件透明度设为1，用户完全感知不到滚动过程。

内容的提问来源于stack exchange，提问作者m.reiter