Compose UI 1.4.0-rc01滚动与变换冲突问题及解决方案咨询

问题场景 #

在Compose UI 1.3.3版本中，以下代码可同时实现垂直滚动与内容变换（缩放）功能：

Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
    val transformableState = rememberTransformableState { zoomChange, _, _ -> }

    Box(modifier = Modifier.fillMaxWidth().transformable(state = transformableState)) {
        // scrollable content goes here
    }
}

但升级至1.4.0-rc01版本后，仅变换功能正常，垂直滚动完全失效。

临时解决方法 #

通过自定义手势监听替代transformable Modifier，避免手势事件被拦截导致滚动失效。示例代码如下：

Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
    // 维护缩放比例状态
    var scale by remember { mutableStateOf(1f) }

    Box(
        modifier = Modifier
            .fillMaxWidth()
            // 自定义手势检测
            .pointerInput(Unit) {
                detectTransformGestures(
                    panZoomLock = false
                ) { _, _, zoom, _ ->
                    // 限制缩放范围，避免过度缩放
                    scale = (scale * zoom).coerceIn(0.5f, 3f)
                }
            }
            // 应用缩放变换
            .graphicsLayer(scaleX = scale, scaleY = scale)
    ) {
        // 此处放置需要滚动和变换的内容
        Text(text = "测试滚动与缩放内容".repeat(50), modifier = Modifier.padding(16.dp))
    }
}

方案说明

• 使用pointerInput结合detectTransformGestures直接处理变换手势，相比transformable更灵活，不会默认拦截所有垂直滑动事件；
• 通过graphicsLayer应用缩放变换，保证内容变换效果正常；
• 可以通过coerceIn限制缩放范围，提升交互体验。

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