4

estoy empezando con JetPack Compose y quiero hacer un reproductor de Audio, todo funciona bien, solo que en un Box tengo una imagen de la carátula de la canción y encima tengo un botón de play, al dar clic en la imagen reproduce y pausa, pero lo que quiero saber, si me ayudan, es como al hacer click en la imagen play esta misma cambie por la imagen pause

Image(
    painter = painterResource(id = R.drawable.play),
    contentDescription = "Play",
    modifier = Modifier
        .clickable(onClick = {
            if (mp?.isPlaying == true) {
                mp?.pause()
            } else {

                mp?.play()
            }

        })
        .align(Alignment.Center)
        .width(50.dp)
        .height(50.dp)
)//Image

1 respuesta 1

4

Jetpack Compose se basa en el paradigma de UI declarativa. En este paradigma, la UI es inmutable y por lo tanto no se puede hacer algo como cambiar una imagen. En cambio, cada modificación en el estado de tu app produce una nueva UI. Es decir, que lo que debes modificar no es la imagen sino el estado.

Para ello lo primero que necesitas es crear un estado que en tu caso podría llamarse isPlaying

var isPlaying by remember { mutableStateOf(false) }

Esto crea un estado mutable con el valor inicial false (asumo que inicialmente la canción no se estará reproduciendo). Además está haciendo uso de delegados para que el estado se actualice automáticamete cuando cambies el valor de la variable. Para más detalles lee la documentación.

El siguiente paso es definir que imagen generar en cada estado

val image = if (isPlaying) R.drawable.pause else R.drawable.play

Finalmente creas la imagen que corresponda con un onClick que actualice el valor de isPlaying

var isPlaying by remember { mutableStateOf(false) }
val image = if (isPlaying) R.drawable.pause else R.drawable.play
Image(
    painter = painterResource(image),
    contentDescription = "Play",
    modifier = Modifier
        .clickable {
            if (mp?.isPlaying == true) {
                mp.pause()
                isPlaying = true
            } else {
                mp?.play()
                isPlaying = false
            }
        }
        .align(Alignment.Center)
        .width(50.dp)
        .height(50.dp)
)//Image

Al cambiar un estado ocurre lo que compose llama recomposition, entonces todo ese código se vuelve ejecutar generando una nueva imagen en el mismo lugar donde estaba la anterior. Esto produce el mismo resultado que querías aunque es muy diferente conceptualmente. Para una mejor explicación ver este video.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.