android - 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() :此函数将图像加载到 后台线程 ，一旦加载完成，将安排重组，此函数将返回延迟的图像资源 LoadedResource或 FailedResource

所以你的 lazyColumn由于您正在同步加载图像，因此滚动不顺畅。
所以你应该使用 loadImageResource()或名为 Accompanist 的库作者:Chris Banes，它可以使用 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维奈·加巴