Compose中如何为Image/Icon矢量图添加渐变着色效果

可以实现矢量图的渐变着色，无需依赖ColorFilter的单色着色能力，以下是两种可直接落地的实现方式：

• 方案1：通过Modifier.drawWithContent配合BlendMode实现（通用方案，适配所有矢量图标）
  核心逻辑是先绘制原始矢量图，再用渐变画笔叠加并使用SrcIn混合模式保留矢量图的轮廓，仅替换着色内容：

  // 定义渐变Brush
  val gradientBrush = Brush.linearGradient(
      colors = listOf(Color(0xFF6200EE), Color(0xFF3700B3)),
      start = Offset.Zero,
      end = Offset.Infinite
  )
  
  Icon(
      painter = painterResource(id = R.drawable.ic_your_vector),
      contentDescription = null,
      modifier = Modifier
          .size(48.dp)
          .drawWithContent {
              // 先绘制原始图标作为遮罩
              drawContent()
              // 叠加渐变，使用SrcIn混合模式仅保留和图标轮廓重叠的区域
              drawRect(
                  brush = gradientBrush,
                  blendMode = BlendMode.SrcIn
              )
          }
  )
  

  适配说明：Compose 1.2.0以下版本可将BlendMode替换为PorterDuffMode.SRC_IN配合drawIntoCanvas实现，逻辑完全一致。

• 方案2：自定义矢量图path的填充Brush（适合固定渐变规则的矢量图）
  如果需要为矢量图的不同path设置差异化渐变，可直接在定义ImageVector时为对应path设置fill属性为渐变Brush：

  val customVector = ImageVector.Builder(
      defaultWidth = 24.dp,
      defaultHeight = 24.dp,
      viewportWidth = 24f,
      viewportHeight = 24f
  ).apply {
      path(
          fill = Brush.linearGradient(
              colors = listOf(Color.Red, Color.Blue)
          )
      ) {
          // 矢量图路径绘制逻辑
          moveTo(12f, 2f)
          lineTo(22f, 22f)
          lineTo(2f, 22f)
          close()
      }
  }.build()
  

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