Jetpack Compose Canvas调用drawPath不生效 滑动时无绘制效果

问题原因 #

• 你当前使用remember存储的是普通Path实例，Path本身不是Jetpack Compose的可观察状态类型，修改Path内部的路径数据不会触发Compose重组，Canvas的绘制逻辑不会重新执行，因此看不到滑动生成的轨迹。
• 不需要额外更换pointerInteropFilter实现，只需要给Path加上可观察状态包装即可。

修复后代码 #

@ExperimentalComposeUiApi
@Composable
fun CanvasDraw() {
    // 用mutableStateOf把Path包装为可观察状态
    var path by remember { mutableStateOf(Path()) }

    Canvas(modifier = Modifier
        .fillMaxSize()
        .pointerInteropFilter {
            when (it.action) {
                MotionEvent.ACTION_DOWN -> {
                    // 修改状态触发重组
                    path = path.apply {
                        moveTo(it.x, it.y)
                    }
                    true
                }
                MotionEvent.ACTION_MOVE -> {
                    path = path.apply {
                        lineTo(it.x, it.y)
                    }
                    true
                }
                else -> false
            }
            true
        }) {
        drawPath(
            path = path,
            color = Color.Blue,
            style = Stroke(10f)
        )
    }
}

可选优化方案 #

如果想要更符合Compose原生实现规范，可以用pointerInput替代pointerInteropFilter，不需要标记ExperimentalComposeUiApi注解：

@Composable
fun CanvasDraw() {
    var path by remember { mutableStateOf(Path()) }

    Canvas(modifier = Modifier
        .fillMaxSize()
        .pointerInput(Unit) {
            detectDragGestures { change, _ ->
                if (change.previousPressed != change.pressed && change.pressed) {
                    path = path.apply {
                        moveTo(change.position.x, change.position.y)
                    }
                } else if (change.pressed) {
                    path = path.apply {
                        lineTo(change.position.x, change.position.y)
                    }
                }
            }
        }
    ) {
        drawPath(
            path = path,
            color = Color.Blue,
            style = Stroke(10f)
        )
    }
}

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