Hola, estoy tratando de implementar una lazycolumn de una lista de publicaciones, lo probé en el emulador api 21 y 29 y se ve un poco fluido en el api 29, es un poco lento, cuando lo probé en un dispositivo físico fue retrasado, parece que se está saltando fotogramas o algo así...
Traté de eliminar algunas vistas que usan imageVector para ver si ese era el problema y sigue siendo el mismo problema.
Esta es mi vista componible:
@Composable fun HomePostView( category: String, imagesUrl: List<String> = listOf(imageHolder), doctorProfileImage: String = imageUrl, title: String, subTitle: String ) { Card( shape = PostCardShape.large, modifier = Modifier .padding(horizontal = 3.dp) .fillMaxWidth() ) { Column { PostTopView( category = category, onOptionsClicked = { /*TODO option click*/ }, onBookmarkClicked = {/*TODO bookmark click*/ }) CoilImage( data = imagesUrl[0], fadeIn = true, contentDescription = "post_image", modifier = Modifier .fillMaxWidth() .requiredHeight(190.dp) .padding(horizontal = contentPadding), contentScale = ContentScale.Crop ) Spacer(modifier = Modifier.height(10.dp)) PostDoctorContent( doctorProfileImage = doctorProfileImage, title = title, subTitle = subTitle ) Spacer(modifier = Modifier.height(contentPadding)) PostBottomView(likesCount = 293, commentsCount = 22) Spacer(modifier = Modifier.height(contentPadding)) } } Spacer(modifier = Modifier.height(10.dp)) } @Composable private fun PostDoctorContent(doctorProfileImage: String, title: String, subTitle: String) { Row( modifier = Modifier .fillMaxWidth() .padding(horizontal = contentPadding) ) { CoilImage(data = doctorProfileImage, contentScale = ContentScale.Crop, contentDescription = null, fadeIn = true, modifier = Modifier .size(30.dp) .clip(CircleShape) .clickable { /*Todo on doctor profile clicked*/ }) Column { Text( text = title, fontSize = 14.sp, maxLines = 1, overflow = TextOverflow.Ellipsis, modifier = Modifier.padding(horizontal = contentPadding) ) Text( text = subTitle, fontSize = 11.sp, color = LightTextColor, maxLines = 2, overflow = TextOverflow.Ellipsis, modifier = Modifier.padding(horizontal = contentPadding) ) } } } @Composable private fun PostBottomView(likesCount: Long, commentsCount: Long) { Row( modifier = Modifier.padding(horizontal = contentPadding), verticalAlignment = Alignment.CenterVertically ) { Row( Modifier .clip(RoundedCornerShape(50)) .clickable { /*Todo on like clicked*/ } .padding(5.dp), verticalAlignment = Alignment.CenterVertically ) { Icon( imageVector = ImageVector.vectorResource(id = R.drawable.ic_heart), contentDescription = "Like" ) Spacer(modifier = Modifier.width(5.dp)) Text(text = likesCount.toString(), fontSize = 9.sp) } Spacer(Modifier.width(20.dp)) Row( Modifier .clip(RoundedCornerShape(50)) .clickable { /*Todo on comment clicked*/ } .padding(5.dp), verticalAlignment = Alignment.CenterVertically ) { Icon( imageVector = ImageVector.vectorResource(id = R.drawable.ic_comment), contentDescription = "Comment" ) Spacer(modifier = Modifier.width(5.dp)) Text(text = commentsCount.toString(), fontSize = 9.sp) } } } @Composable private fun PostTopView( category: String, onOptionsClicked: () -> Unit, onBookmarkClicked: () -> Unit ) { Row( modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween ) { Row(verticalAlignment = Alignment.CenterVertically) { IconButton(onClick = onOptionsClicked) { Icon( imageVector = ImageVector.vectorResource(id = R.drawable.ic_threedots), contentDescription = "Options", tint = Color.Unspecified ) } Text(text = category, fontSize = 16.sp, color = LightTextColor) } IconButton(onClick = onBookmarkClicked) { Icon( imageVector = ImageVector.vectorResource(id = R.drawable.ic_bookmark), contentDescription = "Bookmark" ) } } }y la columna perezosa:
LazyColumn(contentPadding = paddingValues , state = state ) { item { Spacer(modifier = Modifier.height(10.dp)) DoctorsList( viewModel.doctorListData.value, onCardClicked = {}) } items(30) { post -> HomePostView( category = "Public Health ", title = "Food Importance", subTitle = "you should eat every day it's healthy and important for you, and drink water every 2 hours and what you should do is you should run every day for an hour" ) } }Nota: todavía no estoy usando un modelo de vista, solo estoy probando la vista con datos falsos
Es posible que esto no funcione para nadie más, pero en una versión anterior ( 1.0.0-beta01 ) vi una gran mejora en el rendimiento cuando cambié
lazy(items) { item -> ... }para
items.forEach { item -> lazy { ... } }No tengo idea de por qué y no estoy seguro de si este sigue siendo el caso en versiones posteriores, pero vale la pena comprobarlo. Entonces, para el ejemplo dado en la pregunta, eso significaría cambiar
items(30) { ... }para
repeat(30) { item { ... } }Ok, hasta ahora sé que hay un problema con la API cuando se trata de rendimiento... Pero lo que encontré es esto
En realidad, en mi caso, solo estaba cargando la imagen con una imagen de 2980 * 3750 píxeles. Acabo de reducir mis recursos a píxeles más cortos con algunas otras herramientas
Ahora el lag no está presente...
Intente compilar la versión de lanzamiento con desactivar los registros de depuración. debería funcionar bien.
TLDR: asegúrese de que su nuevo elemento de composición LazyColumn no esté dentro de un RelativeLayout o LinearLayout.
Después de investigar un poco, la solución a este problema para nosotros fue la vista en la que se restringió LazyColumn.
Nuestro proyecto utiliza una combinación de Jetpack Compose y los archivos de diseño XML más antiguos. Nuestros nuevos elementos de redacción se incrustaron en un RelativeLayout de un archivo XML existente. Aquí era donde estaba el problema. El elemento de redacción ocuparía toda la pantalla y luego se llamaría a la función onMeasure del elemento de redacción para reconfigurar la vista y agregar nuestra barra de navegación inferior... se llamó a este onMeasure una y otra vez, lo que también en el caso de a LazyColumn, la nueva medición estaba arrojando el caché ya que la altura había cambiado.
La solución para nosotros fue cambiar el RelativeLayout que contenía tanto el nuevo elemento de redacción como la barra de navegación inferior y reemplazarlo con un ConstraintLayout. Esto evitó que onMeasure fuera llamado más de dos veces y proporcionó un aumento masivo del rendimiento.
En mi caso, después de configurar la altura de ComposeView en un valor específico, hace que LazyColumn se desplace sin problemas.
Por lo tanto, creo un archivo XML como
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <androidx.compose.ui.platform.ComposeView android:id="@+id/compose" android:layout_width="match_parent" android:layout_height="match_parent" /> </FrameLayout> Fragment
override fun onViewCreated(view: View, savedInstanceState: Bundle ? ) { super.onViewCreated(view, savedInstanceState) view.doOnLayout { compose.layoutParams.height = view.height compose.requestLayout() } } Sé que la altura de ComposeView ya coincide con el match_parent , por lo que establecer la altura nuevamente en Fragment parece inútil. Sin embargo, sin establecer la altura, LazyColumn se retrasará cuando se desplace.
No estoy seguro de si funcionará en todos los dispositivos, pero funcionará bien en mi Pixel y Xiomi .
Si está utilizando JPG o PNG en su proyecto, verifique su tamaño, las imágenes que tienen un tamaño más grande causan muchos problemas de retraso en los dispositivos de gama baja. Estaba teniendo el mismo problema con mi lista simple de LazyColumn y resultó que estaba usando un JPG con un tamaño superior a 2 MB.