在Jetpack Compose中如何旋转ImageVector并存储至数据类？

由于ImageVector是不可变类型，无法直接修改原有实例的旋转状态，我们需要生成带旋转变换的新ImageVector实例，这样就能继续存入你的Item数据类中。以下是两种可行方案：

方案一：创建带旋转变换的新ImageVector #

通过ImageVector.Builder复制原图标路径，并添加90度旋转变换，生成新实例：

import androidx.compose.ui.graphics.Matrix
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.path

// 扩展函数：给ImageVector添加90度旋转变换
fun ImageVector.rotate90(): ImageVector {
    return ImageVector.Builder(
        name = "${this.name}_Rotated90",
        defaultWidth = this.defaultHeight, // 旋转后宽高互换
        defaultHeight = this.defaultWidth,
        viewportWidth = this.viewportHeight,
        viewportHeight = this.viewportWidth
    ).apply {
        // 复制原图标所有路径信息
        this@rotate90.paths.forEach { originalPath ->
            path(originalPath.fillType, originalPath.pathData)
        }
        // 添加绕中心旋转90度的变换矩阵
        addTransform(
            Matrix().apply {
                rotate(90f, viewportWidth / 2f, viewportHeight / 2f)
            }
        )
    }.build()
}

// 使用示例：生成旋转后的Item对象
val rotatedItem = Item(Icons.Filled.Send.rotate90())

方案二：绘制时通过Modifier旋转（无需修改ImageVector） #

如果不需要永久修改ImageVector，可以在Composable绘制阶段通过Modifier.rotate()实现旋转，这种方式更轻量：

import androidx.compose.foundation.Image
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.VectorPainter
import androidx.compose.ui.unit.dp

@Composable
fun DrawItemIcon(item: Item) {
    Image(
        painter = VectorPainter(item.icon),
        contentDescription = null,
        modifier = Modifier.rotate(90f),
        width = 24.dp,
        height = 24.dp
    )
}

关键注意事项 #

• 方案一中，旋转后需互换defaultWidth/defaultHeight和viewportWidth/viewportHeight，因为90度旋转会让图标宽高维度交换。
• ImageVector的变换是叠加的，多次调用rotate90()会累积旋转角度。

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