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

Question

我在下面可以与框内的图像组合（在LazyColumn内）。 当我单击框时，图像比例正在改变（我已经验证），但 UI 上的图像没有改变。 也就是说，UI 保持不变，但它应该改变。 我在这里想念什么？

@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

我之前没有提到它，但我找到了问题的原因并解决了它。 transformations function 在内容比例更改时强制 ui 不更改

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
)