Android Jetpack Compose中Canvas调用imageResource报错求助

问题原因 #

ImageBitmap.imageResource()是带有@Composable注解的函数，仅能在Composable上下文环境中调用。但Canvas的lambda回调属于普通函数上下文，并非Composable上下文，因此直接在其中调用会触发@Composable invocations can only happen from the context of a @Composable function错误。

解决方案 #

将图片加载操作移到Canvas外部的Composable上下文中完成，并用remember缓存加载结果避免重复加载，之后在Canvas中直接使用预加载好的ImageBitmap：

@Composable
fun PokemonScreen() {
    // 在Composable上下文预加载图片，用remember缓存
    val pokemonImage = remember {
        ImageBitmap.imageResource(id = R.drawable.pokemonimg)
    }

    Column(modifier = Modifier.fillMaxSize()) {
        Topbar()
        Canvas(modifier = Modifier.fillMaxSize()){
            drawCircle(color = Color.LightGray, radius = 100.dp.toPx())
            // 使用预加载的图片
            drawImage(pokemonImage)
        }
    }
}

说明 #

• remember的作用是在Composable重组时保留图片实例，避免每次重组都重新加载图片，提升性能
• 把图片加载逻辑移出Canvas的lambda，确保在合法的Composable上下文调用imageResource

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