LazyColumnFor 滚动不流畅

Question

所以，我已经实现了一个 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])
}

Answer 1

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

imageResource()：这个Composable函数，同步加载一个图片资源.
loadImageResource()：此函数在 后台线程 中加载图像，加载完成后，将安排重组，此函数将 return 延迟图像资源 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，请查看 this repository by Vinay Gaba

Answer 2

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

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

LazyColumn/Row will now keep up to 2 previously visible items active (not disposed) even when they are scrolled out already. This allows the component to reuse the active subcompositions when we will need to compose a new item which improves the scrolling performance. (Ie5555)

LazyColumnFor 滚动不流畅

LazyColumnFor is not smooth scrolling

android

kotlin

android-recyclerview

android-jetpack-compose