更改图像内容比例不会更改 jetpack compose 中的 UI

Question

I've below composable with image inside box (which is inside LazyColumn ). When I click on box, image scale is changing (which I've verified), but image on UI is not changing. That is, UI stays same, but it should change. What am I missing here?

@Composable
fun ImageContent(url: String) {
    var scale by remember { mutableStateOf(1f) }
    val state = rememberTransformableState { zoomChange, _, _ ->
        scale = (scale * zoomChange).coerceIn(1f, 3f)
    }
    var expanded by remember { mutableStateOf(false) }

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(300.dp)
            .padding(start = 4.dp, end = 4.dp)
            .clip(RoundedCornerShape(16.dp))
            .graphicsLayer(scaleX = scale, scaleY = scale)
            .transformable(state = state)
            .clickable { expanded = !expanded },
    ) {
        Image(
            modifier = Modifier.fillMaxSize(),
            painter = rememberImagePainter(data = url),
            contentScale = if (expanded) ContentScale.Fit else ContentScale.Crop
        )
    }
}

Answer 1

I didn't mentioned it earlier, but I found the cause of issue and resolved it. transformations function was forcing the ui to not change when content scale change

Image(
    modifier = Modifier.fillMaxSize(),
    painter = rememberImagePainter(
        data = url,
        builder = {
            placeholder(R.drawable.ic_filled_placeholder)
            crossfade(300)
            // This line was forcing the ui to not change when content scale change
            transformations(RoundedCornersTransformation(16f))
        }
    ),
    contentScale = if (expanded) ContentScale.Fit else ContentScale.Crop,
    contentDescription = null
)