Android 矢量 xml 文件 - 是否可以在不受 Jetpack Compose 色調影響的情況下修復顏色？

Question

我有這個可繪制的矢量。 ic_check.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="20dp"
    android:height="20dp"
    android:viewportWidth="20"
    android:viewportHeight="20">
    <path
        android:fillColor="#2D3296"
        android:pathData="M10,0C4.48,0 0,4.48 0,10C0,15.52 4.48,20 10,20C15.52,20 20,15.52 20,10C20,4.48 15.52,0 10,0ZM8,15L3,10L4.41,8.59L8,12.17L15.59,4.58L17,6L8,15Z" />
    <path
        android:fillColor="#ffffff"
        android:pathData="M8,15L3,10L4.41,8.59L8,12.17L15.59,4.58L17,6L8,15Z" />
</vector>

在 Jetpack Compose 中，我使用 Icon 和 tint

Icon(
    imageVector = ImageVector.vectorResource(R.drawable.ic_check),
    contentDescription = null,
    modifier = Modifier
        .size(20.dp),
    tint = Color.Red,
)

但它改變了所有路徑 colors：

我想要的是白色刻度和淺色背景。 我想知道是否有一種方法可以將刻度顏色固定為白色，並且只更改背景顏色？ 刻度是 xml 中的第二path 。 我查看了我看不到任何東西的屬性。 另一種解決方案是讓它透明，但它會受到布局背景顏色的影響。

Answer 1

答案在技術上是否定的，但有一個非常簡單的解決方法。 您絕對不能有選擇地僅對矢量可繪制對象的一部分進行着色。

但是您可以做的是將您的圖標分成 2 個項目 - 背景圓圈和前景復選標記。 然后，您可以將它們都包裝在 Box 容器中，並在背景圖標頂部顯示復選標記圖標，並且僅對背景圖標進行着色。

Box(){
    Icon(
        imageVector = ImageVector.vectorResource(R.drawable.ic_background),
        tint = Color.Red,
        ...
    )
    Icon(
        imageVector = ImageVector.vectorResource(R.drawable.ic_check),
        .....
    )
}

Answer 2

刪除向量中的圓形路徑：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="20dp"
    android:height="20dp"
    android:viewportWidth="20"
    android:viewportHeight="20"
    >
    <path
        android:fillColor="#ffffff"
        android:pathData="M8,15L3,10L4.41,8.59L8,12.17L15.59,4.58L17,6L8,15Z" />

</vector>

然后使用 tint the background修改器應用圓形紅色背景和tint屬性來為刻度線着色。

Icon(
    painterResource(id = R.drawable.vector2),
    contentDescription = null,
    modifier = Modifier.size(20.dp).background(Red, CircleShape),
    tint = White
)