在 Jetpack Compose 中动态更改图标

Question

我有两个“喜欢”按钮的图标 -ic_thumb_up和ic_thumb_up_selected

图标的类型应取决于offer.likedByUser参数。

var thumbIcon by remember {
    mutableStateOf(if (offer.likedByUser) R.drawable.ic_thumb_up_selected else R.drawable.ic_thumb_up)
}

IconButton(
    onClick = {
        offer.likedByUser = !offer.likedByUser
    } 
) {
    Image(painter = painterResource(id = thumbIcon) )
}

为什么它不起作用？

Answer 1

这段代码

var thumbIcon by remember {
   mutableStateOf(if (offer.likedByUser) R.drawable.ic_thumb_up_selected else R.drawable.ic_thumb_up)
}

仅运行一次，并将值设置为thumbs_up_selected或thumbs_up。您没有更改处理程序mutableStateOf中的onClick，因此什么也没有发生。

你需要像这样改变它

var thumbIconLiked by remember {
   mutableStateOf(offer.likedByUser)
}

IconButton(
    onClick = {
        thumbIconLiked = !thumbIconLiked
    } 
) {
    Image(
        painter = painterResource(
            id = if (thumbIconLIked) { 
                R.drawable.ic_thumb_up_selected 
            } else { 
                R.drawable.ic_thumb_up 
            },
            contenDescription = "thumb",
        )
    )
}