Jetpack Compose中Canvas在StateFlow设为null时未清除绘制内容

Compose的Canvas默认不会自动清除画布内容。当你将points设为null时，points?.apply代码块不会执行，没有新的绘制操作覆盖原有内容，底层Surface上的旧绘制像素会保留下来，所以图表看起来没被清除。

要清除Canvas内容，你需要手动绘制覆盖整个画布的背景，将旧内容覆盖，具体有两种实现方式：

方式一：始终先绘制背景 #

在Canvas的最开始逻辑中，不管points是否存在，先绘制与父布局一致的背景色，确保每次重组都清除画布：

// 修正拼写错误：colectAsState → collectAsState()
val points by viewModel.points.collectAsState()

Canvas(
    modifier = Modifier.fillMaxSize()
) {
    // 绘制背景清除旧内容，颜色需和父布局背景保持一致
    drawRect(color = MaterialTheme.colorScheme.background)
    
    points?.let { pointList ->
        for (i in 0 until pointList.size - 1) {
            // 你的绘制逻辑示例：连接点的线条
            drawLine(
                start = pointList[i],
                end = pointList[i + 1],
                color = Color.Red,
                strokeWidth = 3f
            )
        }
    }
}

方式二：仅在points为null时绘制背景 #

如果考虑性能不想每次都绘制背景，可以只在points为null时绘制背景覆盖旧内容：

val points by viewModel.points.collectAsState()

Canvas(
    modifier = Modifier.fillMaxSize()
) {
    if (points == null) {
        // 清除画布
        drawRect(color = MaterialTheme.colorScheme.background)
    } else {
        points?.let { pointList ->
            for (i in 0 until pointList.size - 1) {
                // 你的绘制逻辑
                drawLine(
                    start = pointList[i],
                    end = pointList[i + 1],
                    color = Color.Red,
                    strokeWidth = 3f
                )
            }
        }
    }
}

• 修正代码中的拼写错误：colectAsState需改为collectAsState()，该错误会导致状态无法正确收集，可能间接引发问题。
• 如果父布局背景不是纯色，需确保绘制的背景与父布局完全匹配，避免出现视觉差异。

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