Jetpack Compose中Vector Drawable设大尺寸仍显示过小问题求助

问题原因 #

你遇到的矢量图无论设置多大尺寸都显示偏小的问题，90%以上的原因是矢量图的视口（viewport）存在大量透明留白：你当前的矢量图视口尺寸为841*1189，但实际绘制图案的path只占了视口的极小一部分，多余的透明区域会跟着矢量图一起缩放，导致可见的图案部分看起来永远偏小。
另外ContentScale参数设置、矢量图兼容配置也可能引发类似问题。

解决方案 #

1. 裁剪矢量图视口（优先处理） #

打开矢量Drawable文件，调整viewportWidth、viewportHeight数值到刚好包裹所有绘制path的边界，同时对应修改所有path的坐标，删掉视口内多余的透明留白。
举个例子：如果你的所有path的坐标范围是x轴从220到642、y轴从344到944，那么新的视口可以设置为：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="141dp"
    android:height="200dp"
    android:viewportWidth="422"
    android:viewportHeight="600">
  <!-- 所有path的x坐标减220，y坐标减344 -->
  // 修改后的paths...
</vector>

你也可以直接用Android Studio的矢量图编辑功能，一键裁剪多余空白：右键矢量Drawable文件→选择"Open In"→"Vector Asset Studio"，拖动边界裁剪掉透明区域后自动生成新的矢量代码。

2. 调整ContentScale参数 #

你当前使用的ContentScale.Fit会等比例缩放矢量图，完整塞入你设置的控件尺寸，如果矢量图的宽高比和控件宽高比不一致，就会产生留白导致看起来偏小，可根据需求替换为其他缩放模式：

• ContentScale.Crop：等比例缩放填满控件，超出部分裁剪，无留白
• ContentScale.FillBounds：不等比例拉伸填满控件，图案可能变形
• ContentScale.FillWidth：强制填充满控件宽度，高度自适应
  修改后的Image组件示例：

Image(
    painter = painterResource(id = R.drawable.ic_book_sun),
    contentDescription = "Book",
    contentScale = ContentScale.Crop, // 替换为你需要的缩放模式
    modifier = Modifier
        .size(
            maxWidth / 1.5F,
            maxHeight / 3
        )
        .constrainAs(bookIcon) {
            centerTo(parent)
        }
)

3. 检查矢量图兼容配置 #

确认app模块build.gradle文件中开启了矢量图支持，避免低版本系统兼容异常：

android {
    defaultConfig {
        // ...其他配置
        vectorDrawables.useSupportLibrary = true
    }
}

内容的提问来源于stack exchange，提问作者Loïc Jackotin