如何在代码中将48dp矢量图标放大至64dp？优先Jetpack Compose方案

核心逻辑 #

矢量图标支持无损缩放，无需修改原始矢量文件的路径数据，只需通过代码控制显示尺寸，结合设备类型判断区分手机/平板的显示规格即可。

具体实现方案 #

1. 基于设备配置动态设置尺寸（推荐） #

利用LocalConfiguration判断设备类型，直接指定图标显示尺寸：

import androidx.compose.foundation.layout.size
import androidx.compose.material.Icon
import androidx.compose.material.icons.Icons
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.unit.dp

@Composable
fun AdaptiveSizeIcon() {
    val config = LocalConfiguration.current
    // 以600dp最小宽度作为平板判断阈值（Android官方推荐）
    val iconSize = if (config.screenWidthDp >= 600) 64.dp else 48.dp

    Icon(
        imageVector = Icons.Filled.YourIcon, // 替换为你的矢量图标资源
        contentDescription = "自适应尺寸图标",
        modifier = Modifier.size(iconSize)
    )
}

2. 结合资源限定符实现自动适配 #

保留原始48dp图标在res/drawable目录，新建res/drawable-sw600dp（平板专属资源目录），在该目录下创建同文件名的矢量图标，修改width和height为64dp，viewportWidth/Height保持48不变：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="64dp"
        android:height="64dp"
        android:viewportWidth="48"
        android:viewportHeight="48">
  <path
          android:pathData="....."
          android:fillColor="#ffffff"
          android:fillType="evenOdd"/>
</vector>

Compose中直接引用资源，系统会自动根据设备加载对应尺寸：

import androidx.compose.foundation.layout.size
import androidx.compose.material.Icon
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp

@Composable
fun ResourceAdaptiveIcon() {
    Icon(
        painter = painterResource(id = R.drawable.your_vector_icon),
        contentDescription = "资源适配图标",
        // 若不指定size，会跟随资源文件定义的尺寸显示
        modifier = Modifier.size(48.dp) 
    )
}

3. 动态缩放实现灵活适配 #

如果需要自定义缩放比例，可使用scale modifier：

import androidx.compose.foundation.layout.size
import androidx.compose.material.Icon
import androidx.compose.material.icons.Icons
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.scale
import androidx.compose.ui.unit.dp

@Composable
fun ScaledVectorIcon() {
    val config = LocalConfiguration.current
    val scaleFactor = 64f / 48f // 平板相对于手机的缩放比例
    val modifier = if (config.screenWidthDp >= 600) {
        Modifier.size(48.dp).scale(scaleFactor)
    } else {
        Modifier.size(48.dp)
    }

    Icon(
        imageVector = Icons.Filled.YourIcon,
        contentDescription = "缩放图标",
        modifier = modifier
    )
}

注意事项 #

• 矢量图标的viewportWidth/Height是路径数据的坐标系基准，无需修改，仅调整显示尺寸即可实现无损缩放。
• 设备判断的宽度阈值可根据业务需求调整，600dp是Android官方认定平板的最小宽度标准。

内容的提问来源于stack exchange，提问作者Mr.T