Compose Card始终存在过度绘制问题，如何排查与解决？

问题现象 #

• Compose的Card组件始终显示过度绘制，而XML中的旧版CardView无此问题。根据Android官方文档建议，应尽量减少视图过度绘制，使颜色趋近绿色、蓝色。
• 仅使用以下代码即可出现3-4次过度绘制的情况：

Card(
    elevation = CardDefaults.cardElevation(defaultElevation = 10.dp),
    modifier = modifier.fillMaxWidth().padding(vertical = 10.dp)
) {
    Column(
        modifier = Modifier
            .padding(all = 16.dp)
    ) {
        Text("randomText")
    }
}

• 查看NowInAndroid示例应用，开启过度绘制调试后界面也全为红色显示：
  

疑问 #

1. 开发者选项中的Debug GPU Overdraw功能是否提供准确信息？
2. 能否避免此类过度绘制？若可以，如何操作？

解答 #

1. Debug GPU Overdraw的准确性 #

Debug GPU Overdraw的统计信息是准确的，但要结合Compose的绘制机制理解：
Compose的Card组件默认会绘制多层内容：背景层、阴影层（基于设置的elevation）、内容层，这些叠加会被统计为过度绘制。而传统CardView的阴影是通过硬件加速的Outline阴影实现，不会被统计为额外的绘制层，这就是两者显示差异的核心原因。不过Compose中这些多层绘制大多是实现Material Design视觉效果的必要步骤，并非无效的重复绘制。

2. 过度绘制的优化方案 #

可以针对性减少非必要的过度绘制，操作如下：

• 移除不必要的阴影：如果不需要阴影效果，直接将elevation设为0dp，减少阴影层的绘制：

  Card(
      elevation = CardDefaults.cardElevation(defaultElevation = 0.dp),
      modifier = modifier.fillMaxWidth().padding(vertical = 10.dp)
  ) {
      // 内容区域
  }
  

• 自定义阴影+背景替代Card内置实现：如果需要阴影效果，可使用Modifier.shadow配合background单独实现，避免Card内部的多层默认绘制：

  Box(
      modifier = modifier
          .fillMaxWidth()
          .padding(vertical = 10.dp)
          .shadow(10.dp, shape = RoundedCornerShape(16.dp))
          .background(MaterialTheme.colorScheme.surface, shape = RoundedCornerShape(16.dp))
  ) {
      Column(
          modifier = Modifier.padding(all = 16.dp)
      ) {
          Text("randomText")
      }
  }
  

• 升级Compose版本：使用最新的Compose版本（如1.4及以上），新版本对绘制层级做了优化，能自动减少部分不必要的过度绘制。
• 区分必要与非必要过度绘制：如果过度绘制是为了满足Material Design的视觉需求（如阴影、圆角），且未引发实际性能问题（如帧率下降、卡顿），这种过度绘制是可接受的，无需强行优化——只有当过度绘制导致性能问题时，再优先处理。

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