es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cambiar la escala del contenido de la imagen no cambia la interfaz de usuario (UI) en Jetpack Compose.

Cambiar la escala del contenido de la imagen no cambia la interfaz de usuario (UI) en Jetpack Compose.

05 Aug, 2023 Programación

Tengo a continuación un componible con una imagen dentro de un cuadro (que está dentro de LazyColumn). Cuando hago clic en el cuadro, la escala de la imagen está cambiando (lo que he verificado), pero la imagen en la interfaz de usuario no cambia. Es decir, la interfaz de usuario se mantiene igual, pero debería cambiar. ¿Qué me falta aquí?

@Composable
fun ContenidoImagen(url: String) {
    var escala by remember { mutableStateOf(1f) }
    val estado = rememberTransformableState { cambioZoom, _, _ ->
        escala = (escala * cambioZoom).coerceIn(1f, 3f)
    }
    var expandido by remember { mutableStateOf(false) }

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

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema podría deberse al hecho de que la variable expanded no se está utilizando para actualizar la escala de contenido (contentScale) del componible Image. Cuando se hace clic en el cuadro, la variable expanded cambia, pero esto no provoca una recomposición del componible Image.

    Para solucionar este problema, el parámetro contentScale del componible Image debe estar vinculado al valor de expanded. Podemos lograr esto utilizando la expresión if para establecer de manera condicional la escala de contenido en función del valor de expanded.

    Aquí está el componible ImageContent actualizado con la corrección:

    @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
        )
    }
}

    Ahora, cuando se hace clic en el cuadro, la escala de contenido del componible Image se actualizará según el valor de expanded, y la interfaz de usuario reflejará el cambio de escala.

Comments are closed.