Compose Canvas绘制内容仅预览显示、运行界面不显示的问题

在Compose组件内使用Canvas绘制的竖线仅在预览中可见，单独复制Canvas部分代码时却能正常显示。

相关Compose代码 #

Card(
        elevation = 6.dp,
        shape = RoundedCornerShape(15.dp),
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 12.dp, vertical = 8.dp)
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .background(color = backgroundColor),
        ) {
            AsyncImage(modifier = Modifier
                .height(180.dp)
                .width(120.dp)
                .padding(12.dp)
             ...  )
              

            Row(
                modifier = Modifier.fillMaxSize()
            ) {

                Column(
                    modifier = Modifier
                        .fillMaxHeight()
                        .weight(0.7f)
                ) {
                   ...
                }

                Canvas(
                    modifier = Modifier
                        .weight(0.3f)
                        .fillMaxHeight()
                        .padding(start = 6.dp)
                ) {
                   // NOT SHOW !!!
                    drawLine(
                        color = Color.White,
                        start = Offset(0f, 0f),
                        end = Offset(0f, size.height),
                        strokeWidth = 2f,
                        pathEffect = PathEffect.dashPathEffect(floatArrayOf(20f, 20f), 0f),
                    )
                }
            }

        }
    }

截图 #

问题出在这 #

Canvas加了padding(start = 6.dp)后，绘制区域会向右偏移6dp，而你画线条的起点是Offset(0f, 0f)——这个位置属于padding的裁剪区域，线条直接被裁没了。预览模式的裁剪逻辑和实际运行不一样，所以预览里能看见线条。

两种解决办法任你选 #

1. 调整线条起始位置：把线条的起始x坐标改成6dp对应的像素值，让线条落在可见区域内：

Canvas(
    modifier = Modifier
        .weight(0.3f)
        .fillMaxHeight()
        .padding(start = 6.dp)
) {
    val paddingStart = 6.dp.toPx()
    drawLine(
        color = Color.White,
        start = Offset(paddingStart, 0f),
        end = Offset(paddingStart, size.height),
        strokeWidth = 2f,
        pathEffect = PathEffect.dashPathEffect(floatArrayOf(20f, 20f), 0f),
    )
}

2. 用offset替代padding：如果只是想让Canvas整体右移6dp，用offset(x = 6.dp)代替padding，这样不会裁剪绘制内容：

Canvas(
    modifier = Modifier
        .weight(0.3f)
        .fillMaxHeight()
        .offset(x = 6.dp)
) {
    drawLine(
        color = Color.White,
        start = Offset(0f, 0f),
        end = Offset(0f, size.height),
        strokeWidth = 2f,
        pathEffect = PathEffect.dashPathEffect(floatArrayOf(20f, 20f), 0f),
    )
}

另外也可以检查内层Row的布局对齐，比如给它添加verticalAlignment = Alignment.CenterVertically，不过最核心的问题还是padding导致的裁剪。

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