时间戳

首页 > 解决方案 > Jetpack Compose 不会在 setValue 上重新组合可组合

android - Jetpack Compose 不会在 setValue 上重新组合可组合

问题描述

我正在尝试使用Jetpackcompose 做一个快速分页示例，在其中加载列表的前 6 个项目，然后加载另一个 6，依此类推，直到列表末尾。

我知道 for 循环中的错误会导致IndexOutOfBounds因为没有很好地设计迭代直到数组的最后一个元素

我的问题是两个，首先是for循环一个，我不知道如何取自0 - 6 , 6 - 12 - 12 - list.size

然后我的另一个问题是，每次我使用 setList 它都应该重新组合LazyColumnForIndex而不是重新组合，导致只呈现前 6 个项目

我在这里做错了什么？

val longList = mutableListOf("Phone","Computer","TV","Glasses","Cup",
        "Stereo","Music","Furniture","Air","Red","Blue","Yellow",
        "White","Black","Pink","Games","Car","Motorbike")

@Composable
fun PaginationDemo() {
    val maxItemsPerPage = 6
    val list = mutableListOf<String>()
    var (page,setValue) = remember { mutableStateOf(1) }
    val (paginatedList,setList) = remember { mutableStateOf(getPaginatedList(page,maxItemsPerPage, list)) }
    LazyColumnForIndexed(items = paginatedList ) { index, item ->

        Text(text = item,style = TextStyle(fontSize = 24.sp))

        if(paginatedList.lastIndex == index){
            onActive(callback = {
                setValue(page++)
                setList(getPaginatedList(page,maxItemsPerPage,list))
            })
        }
    }
}

private fun getPaginatedList(page:Int,maxItemsPerPage:Int,list:MutableList<String>): MutableList<String> {
    val startIndex = maxItemsPerPage * page
    for(item in 0 until startIndex){
        list.add(longList[item])
    }
    return list
}

标签： androidkotlinpaginationandroid-jetpackandroid-jetpack-compose

解决方案

这似乎有效。

@Composable
fun PaginationDemo() {
    val maxItemsPerPage = 6
    val list = mutableStateListOf<String>()
    var (page,setValue) = remember { mutableStateOf(1) }
    val (paginatedList,setList) = remember { mutableStateOf(getPaginatedList(page,maxItemsPerPage, list)) }
    LazyColumnForIndexed(
        items = paginatedList
    ) { index, item ->
        Text(
            text = item,
            style = TextStyle(fontSize = 24.sp),
            modifier = Modifier
                .fillParentMaxWidth()
                .height((ConfigurationAmbient.current.screenHeightDp / 3).dp)
                .background(color = Color.Blue)
        )
        Divider(thickness = 2.dp)

        Log.d("MainActivity", "lastIndex = ${paginatedList.lastIndex} vs index = $index")
        if(paginatedList.lastIndex == index){
            onActive(callback = {
                setValue(++page)
                setList(getPaginatedList(page,maxItemsPerPage,list))
            })
        }
    }
}

private fun getPaginatedList(page:Int,maxItemsPerPage:Int,list:MutableList<String>): MutableList<String> {
    val maxSize = longList.size
    val startIndex = if (maxItemsPerPage * page >= maxSize) maxSize else maxItemsPerPage * page
    list.clear()
    for(item in 0 until startIndex){
        list.add(longList[item])
    }

    return list
}

推荐阅读