Jetpack Compose切换列表项时Vector Drawable显示异常问题求解

问题原因与解决方案 #

可能的根因 #

1. VectorDrawable资源状态复用冲突
   Android系统默认会复用同id的Drawable资源的全局状态，Compose 1.4.0之前的painterResource方法没有自动对矢量Drawable执行mutate()隔离状态，多次切换不同条目加载矢量图时，前一个实例的缩放、边界属性会污染后一个实例的渲染参数，多次切换后就会出现扭曲变形。
2. Image组件测量状态复用异常
   你当前给Image设置的是fillMaxWidth() + wrapContentHeight() + ContentScale.FillWidth组合参数，切换条目时如果不同矢量图的固有宽高比差异较大，Compose重组时可能会复用前一个条目的测量高度，导致新的矢量图被强行拉伸到错误高度，出现变形。

修复方案 #

• 方案1：手动隔离矢量Drawable状态，低版本Compose可替换painter的加载逻辑：

val context = LocalContext.current
val painter = remember(gameTopic.icon) {
    AppCompatResources.getDrawable(context, gameTopic.icon)?.run {
        mutate()
        DrawablePainter(this)
    } ?: painterResource(gameTopic.icon)
}

将上述painter传给Image组件的painter参数即可。也可以直接升级Compose UI版本到1.4.0及以上，该版本已经官方修复了矢量资源状态复用的bug。

• 方案2：给Image添加明确的宽高比约束，避免测量逻辑不稳定：

Image(
    modifier = Modifier
        .constrainAs(gameTopicIcon) {
            start.linkTo(parent.start)
            top.linkTo(parent.top)
        }
        .fillMaxWidth()
        .aspectRatio(你的矢量图默认宽高比) // 比如16/9、1/1等，和矢量图的原始比例一致即可
        .padding(
            start = paddingXxl1,
            end = paddingXxl1,
            top = paddingXxl2
        ),
    // 其余原有参数保持不变
)

• 方案3：给GameTopicItem添加key绑定索引值，切换条目时强制整个组件重组，避免旧状态复用：

if (gameTopicsItems.value.isNotEmpty()) {
    key(currentIndexState.value) {
        GameTopicItem(
            // 原有所有参数保持不变
        )
    }
} else {
    EmptyItemsView(modifier = modifier.padding(top = paddingNormal))
}

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