Jetpack Compose中onTap事件为何使用旧状态？

你的问题核心在于**pointerInput的回调没有随着number的变化而更新**，导致回调里始终捕获的是初始状态的number值。Compose的pointerInput会根据传入的键（参数）来决定是否重新创建触摸事件处理逻辑，如果键没有变化，就会复用之前的回调，自然拿不到新值。

解决方法：将状态变量作为pointerInput的参数传入 #

把number（或者ViewModel中对应的状态）作为pointerInput的参数，这样每当number变化时，Compose就会重新生成触摸回调，确保回调里能获取到最新的状态值。

错误示例（问题复现）：

@Composable
fun GridCanvas(number: Int, onCellTap: (Int, Int) -> Unit) {
    Canvas(modifier = Modifier.fillMaxSize()) {
        // 绘制网格逻辑...
        drawText(text = number.toString(), topLeft = Offset(10f, 30f))
    }
    // 错误：没有将number作为pointerInput的参数，回调复用旧值
    Modifier.pointerInput(Unit) {
        detectTapGestures { offset ->
            // 这里的number始终是初始值
            val column = (offset.x / cellWidth).toInt()
            val row = (offset.y / cellHeight).toInt()
            onCellTap(row, column)
        }
    }
}

修正后的代码：

@Composable
fun GridCanvas(number: Int, onCellTap: (Int, Int) -> Unit) {
    val cellSize = 50f // 示例单元格大小
    Canvas(modifier = Modifier
        .fillMaxSize()
        // 关键：将number作为pointerInput的参数传入
        .pointerInput(number) {
            detectTapGestures { offset ->
                // 现在这里能拿到最新的number值
                val column = (offset.x / cellSize).toInt().coerceIn(0, number - 1)
                val row = (offset.y / cellSize).toInt().coerceIn(0, number - 1)
                onCellTap(row, column)
            }
        }
    ) {
        // 绘制行列数为number的网格
        for (i in 0 until number) {
            drawLine(
                color = Color.Black,
                start = Offset(i * cellSize, 0f),
                end = Offset(i * cellSize, size.height)
            )
            drawLine(
                color = Color.Black,
                start = Offset(0f, i * cellSize),
                end = Offset(size.width, i * cellSize)
            )
        }
        drawText(text = "行列数：$number", topLeft = Offset(10f, 30f))
    }
}

针对ViewModel场景的补充 #

如果实际项目中使用ViewModel，只需将ViewModel中的状态变量作为pointerInput的参数即可，或者直接在回调中访问ViewModel的状态（因为ViewModel是稳定对象，其内部的State会自动更新）：

@Composable
fun GridScreen(viewModel: GridViewModel) {
    val number by viewModel.number.collectAsState()
    GridCanvas(number = number) { row, column ->
        viewModel.onCellTapped(row, column)
    }
}

// 修正后的GridCanvas
@Composable
fun GridCanvas(number: Int, onCellTap: (Int, Int) -> Unit) {
    val cellSize = 50f
    Canvas(modifier = Modifier
        .fillMaxSize()
        .pointerInput(number) { // 传入number作为键
            detectTapGestures { offset ->
                val column = (offset.x / cellSize).toInt().coerceIn(0, number - 1)
                val row = (offset.y / cellSize).toInt().coerceIn(0, number - 1)
                onCellTap(row, column)
            }
        }
    ) {
        // 绘制逻辑...
    }
}

为什么合并到顶层Composable会正常？ #

因为顶层Composable会随着number的变化而重组，此时pointerInput会被重新创建，自然能捕获到新值。而独立的子Composable如果没有正确传递状态作为pointerInput的键，就会复用旧的回调逻辑。

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