Cargando una imagen asincrónica – Jetpack Compose. | por Ziv Kesten Octubre de 2020

Afortunadamente, la comunidad compuesta es increíble y me encontré enviar en el canal #compose slack de Leland Richardson y al final tuve una buena dirección.

Usamos para este widget Picasso, pero cualquier otra biblioteca de carga de imágenes puede hacerlo, si proporciona objetivo interfaz de carga de imágenes.
Para integrar Picasso en su aplicación de Android, agregue la siguiente dependencia build.gradle expediente:

dependencies {
implementation 'com.squareup.picasso:picasso:2.71828'
}

Primero, comencemos con la función anotada con, como siempre Plegable anotación.

@Composable
fun NetworkImage(url: Sting) {
Image(asset = <Where can we get an asset for the image?>)
}

Al cargar una URL en una imagen usando el cargador de imágenes, generalmente necesitamos un enlace a una vista donde se pueda mostrar la imagen, pero no tenemos ninguna vista en la composición, entonces, ¿dónde cargaríamos la imagen?

Picasso y la mayoría de los cargadores de imágenes tienen una interfaz de destino que proporciona devoluciones de llamada, como onSuccess y onFail. en Picasso, esta interfaz se ve así:

public interface Target {
void onBitmapLoaded(Bitmap var1, LoadedFrom var2);

void onBitmapFailed(Exception var1, Drawable var2);

void onPrepareLoad(Drawable var1);
}

Ewww … Java …

Es una broma.

Vemos que con esta interfaz podemos obtener un mapa de bits de la imagen cargada cuando se carga, un dibujo de estado de error con el error en sí mismo si ocurre un error, y un dibujo de marcador de posición si proporcionamos uno para picasso.

Ahora es el momento de utilizar la nueva herramienta de protección proporcionada por el marco de escritura, llamada lambda onCommit.

El efecto onCommit es el efecto del ciclo de vida que se ejecuta llamar de vuelta cada vez que cambian las entradas de efectos.

Suena complicado … ¡simplifiquémoslo!

Básicamente es una lambda que toma un argumento y proporciona un rango en el que puedes ejecutar tu código y destruirlo si es necesario, lo cual es muy útil cuando se trata de operaciones asincrónicas como descargar una imagen de Internet.
Podemos usarlo así:

Vaya … Eso es mucho código que tienes que tomar … te lo explicaremos:

// We declare remembered values first, to avoid redoing the work on recomposition
var
image by remember { mutableStateOf<ImageAsset?>(null) }
var drawable by remember { mutableStateOf<Drawable?>(null) }

Primero, declaramos los valores memorizados, el trabajo de imagen que obtenemos de la red. y un dibujo que será un marcador de posición o imagen del error y que obtendremos de los recursos de nuestra aplicación.
Nos ayudarán a mantener el estado con una nueva composición.
Aprender más acerca de recuerda palabras clave y estados en Jetpack Compose aquí.

Luego declaramos lambda onCommit, que proporcionará un alcance en el que podemos ejecutar nuestro código asincrónico:

onCommit(url) {
val picasso = Picasso.get()
// We load the image to this target
// |
// v
val target = object : Target {
override fun onBitmapLoaded(bitmap: Bitmap?, from: Picasso.LoadedFrom?) {
//Here we get the loaded image
image = bitmap?.asImageAsset()
}
}

También tratamos con comodines y nuestros fallos de código, y en este bloque también necesitamos manejar la eliminación de código.

onDispose {
image = null
drawable = null
picasso.cancelRequest(target)
}

Finalmente, podemos cargar la imagen que obtuvimos en el objetivo:

picasso
.load(url)
.into(target) // <- See how we load into the target?

Tan pronto como dejamos el bloque onCommit, ahora tenemos una imagen y un dibujo y finalmente podemos crear nuestro widget:

if (image != null) {
// Image is a pre-defined composable that lays out and draws a given [ImageAsset].
Image(asset = image, modifier = modifier)}

Y si queremos una imagen de marcador de posición hasta que la imagen esté lista, o dibujar un error en caso de falla, agregaremos este código para dibujarlo en el widget de lienzo:

else if (drawable != null) {
// Canvas is a pre-defined composable
Canvas(modifier = modifier) {
drawIntoCanvas { canvas ->
drawable.draw(canvas.nativeCanvas)
}
}
}

¡Y eso es todo! ¡Ahora tenemos un widget que te permite descargar una imagen de la red y mostrarla !, el widget con el código completo es:

¡Gracias por leer!

¡Y esperamos que usted mismo cree increíbles widgets completos!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *