LazyColumnFor 滚动不流畅答案

【问题标题】：LazyColumnFor is not smooth scrollingLazyColumnFor 滚动不流畅
【发布时间】：2020-09-08 13:02:38
【问题描述】：

所以，我实现了一个lazycolumnfor 来处理配方元素列表，问题是它不能平滑滚动，如果我只是快速滚动，它会卡住直到最后一个元素出现并且不能平滑滚动。

这是我的错误还是我需要添加其他内容？

    data class Recipe(
            @DrawableRes val imageResource: Int,
            val title: String,
            val ingredients: List<String>
    )
    
    val recipeList = listOf(
            Recipe(R.drawable.header,"Cake1", listOf("Cheese","Sugar","water")),
            Recipe(R.drawable.header,"Cake2", listOf("Cheese1","Sugar1","Vanilla")),
            Recipe(R.drawable.header,"Cake3", listOf("Bread","Sugar2","Apple")))
    
    class MainActivity : AppCompatActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContent {
                RecipeList(recipeList = recipeList)
            }
        }
    }
    
    @Composable
    fun RecipeCard(recipe:Recipe){
        val image = imageResource(R.drawable.header)
        Surface(shape = RoundedCornerShape(8.dp),elevation = 8.dp,modifier = Modifier.padding(8.dp)) {
            Column(modifier = Modifier.padding(16.dp)) {
                val imageModifier = Modifier.preferredHeight(150.dp).fillMaxWidth().clip(shape = RoundedCornerShape(8.dp))
                Image(asset = image,modifier = imageModifier,contentScale = ContentScale.Crop)
                Spacer(modifier = Modifier.preferredHeight(16.dp))
                Text(text = recipe.title,style = typography.h6)
                for(ingredient in recipe.ingredients){
                    Text(text = ingredient,style = typography.body2)
                }
            }
        }
    }
    
    @Composable
    fun RecipeList(recipeList:List<Recipe>){
        LazyColumnFor(items = recipeList) { item ->
            RecipeCard(recipe = item)
        }
    }

@Preview
@Composable
fun RecipePreview(){
    RecipeCard(recipeList[0])
}

【问题讨论】：

尝试从您的ReceipeCard 中删除Image

标签： android kotlin android-recyclerview android-jetpack-compose

【解决方案1】：

目前（版本1.0.0-alpha02）Jetpack Compose 有 2 个 Composable 函数用于加载图像资源：

imageResource(): 这个 Composable 函数，同步加载图片资源。
loadImageResource()：此函数在后台线程中加载图像，一旦加载完成，将安排重构，此函数将返回延迟的图像资源LoadedResource或FailedResource

所以您的lazyColumn 滚动不流畅，因为您正在同步加载图像。

因此，您应该使用 loadImageResource() 或 Chris Banes 名为 Accompanist 的库，它可以使用 Coil 图像加载库从外部资源（例如网络）获取和显示图像。

更新：

使用CoilImage：

首先，添加Accompanist Gradle 依赖，然后简单地使用CoilImage 可组合函数：

    CoilImage(data = R.drawable.header)

使用loadImageResource()：

    val deferredImage = loadImageResource(
        id = R.drawable.header,
    )

    val imageModifier = Modifier.preferredHeight(150.dp).fillMaxWidth()
        .clip(shape = RoundedCornerShape(8.dp))
    deferredImage.resource.resource?.let {
        Image(
            asset = it,
            modifier = imageModifier
        )
    }

注意：我在LazyColumnFor 中尝试了两种方式，虽然loadImageResource() 的性能比imageResource() 好，但滚动仍然不流畅。

所以我强烈推荐使用CoilImage

注意 2：要使用 Glide 或 Picasso，请查看 Vinay Gaba 的 this repository

【讨论】：

能否请您添加如何将其与我当前的代码集成？谢谢

【解决方案2】：

另一方面，LazyColumn 尚未针对滚动性能进行优化，但我刚刚在1.0.0-beta07 版本上进行了测试，可以确认它比1.0.0-beta06 更流畅

Compose.UI 1.0.0-beta07相关变更日志：

LazyColumn/Row 现在将最多保留 2 个以前可见的项目，即使它们已经被滚动出去。这允许组件在我们需要组合新项目以提高滚动性能时重用活动的子组合。 (ie5555)

【讨论】：