Jetpack Compose中能否在单页面Column内堆叠多个带内嵌Canvas的DeviceView？

Jetpack Compose 完全支持在 Column 布局中堆叠多个内嵌 Canvas 的自定义组件，出现仅第一个 DeviceView 正常显示的问题，和多Canvas堆叠的兼容性无关，基本都是布局约束、尺寸测量、绘制逻辑的实现问题导致的。

常见故障原因 #

• DeviceView 内部的 Canvas 配置了Modifier.fillMaxSize()等撑满父容器的修饰符，第一个组件直接占满Column的全部垂直空间，第二个组件被挤压到可视区域外
• 绘制逻辑硬编码了绝对像素坐标，没有基于Canvas自身的实际尺寸做相对计算，绘制内容超出Canvas的裁剪边界无法显示
• 尝试通过传入x/y参数调整位置时，只修改了Canvas绘制块内的坐标偏移，没有把偏移量传递给Compose的布局Modifier，导致两个组件的布局占位完全重叠，下层组件被上层遮挡

正确实现参考 #

基础堆叠写法 #

确保每个DeviceView在Column中分配独立的布局空间，不要让单个组件撑满整个列高：

Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.spacedBy(16.dp)
) {
    DeviceView(
        modifier = Modifier
            .fillMaxWidth()
            .height(120.dp),
        pvSum = PVSUM
    )
    DeviceView(
        modifier = Modifier
            .fillMaxWidth()
            .height(120.dp),
        pvSum = PVSUM
    )
}

对应的DeviceView实现要把Modifier作为可传入参数，不要在组件内部硬编码撑满父容器的修饰符：

@Composable
fun DeviceView(
    modifier: Modifier = Modifier,
    pvSum: Int
) {
    Canvas(modifier = modifier) {
        // 基于组件实际尺寸做相对绘制，不要硬编码绝对坐标
        drawRect(
            color = Color(0xFF2196F3),
            topLeft = Offset(size.width * 0.1f, size.height * 0.1f),
            size = Size(size.width * 0.8f, size.height * 0.8f)
        )
    }
}

需要自定义位置偏移的写法 #

如果需要给两个组件设置不同的位置偏移，必须把偏移量作用在布局Modifier上，而不是只修改绘制逻辑内的坐标：

Column(modifier = Modifier.fillMaxSize()) {
    DeviceView(
        modifier = Modifier
            .offset(x = x1.dp, y = y1.dp)
            .size(120.dp),
        pvSum = PVSUM
    )
    DeviceView(
        modifier = Modifier
            .offset(x = x2.dp, y = y2.dp)
            .size(120.dp),
        pvSum = PVSUM
    )
}

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