LazyColumn 和可变列表 - 如何更新?

时间:2021-06-19 11:55:53

标签: android-jetpack-compose

我是 Jetpack Compose 的新手,我花了几个小时来寻找如何使 LazyColumn 更新我更新我的列表。我已经读到它需要是一个不可变的列表才能更新 LazyColumn,但我似乎无法让它工作。

代码如下:

@Composable
fun CreateList() {
    var myList : List<DailyItem> by remember { mutableStateOf(listOf())}
    
    myList = getDailyItemList() // Returns a List<DailyItem> with latest values and uses mutable list internally
    
    // Function to refresh the list
    val onUpdateClick = {
        // Do something that updates the list
        ...
        // Get the updated list to trigger a recompose
        myList = getDailyItemList()
    }
    // Create the lazy column
    ...
}

我已经尝试了几件事,要么在点击更新按钮时列表从未更新,要么只更新第一个项目而不更新列表中的其余项目。我查看了文档,上面写着,但我不明白:

<块引用>

我们建议您使用不可观察的可变对象,而不是使用 一个可观察的数据持有者,例如 State 和不可变的 listOf().

如何更新列表以便更新 LazyColumn?

2 个答案:

答案 0 :(得分:3)

使用SnapshotStateList,列表是可变的。对列表的任何修改(添加、删除、清除...)都将触发 LazyColumn 中的更新。

类似于 mutableListOf()(对于 MutableList),有 mutableStateListOf() 来创建 SnapshotStateList

扩展函数 swapList() 只是结合了 clear()addAll() 调用,用新列表替换旧列表。

fun <T> SnapshotStateList<T>.swapList(newList: List<T>){
    clear()
    addAll(newList)
}

@Composable
fun CreateList() {
    val myList = remember { mutableStateListOf<DailyItem>() }
    
    myList.swapList(getDailyItemList()) // Returns a List<DailyItem> with latest values and uses mutable list internally

    // Function to refresh the list
    val onUpdateClick = {
        // Do something that updates the list
        ...
        // Get the updated list to trigger a recompose
        myList.swapList(getDailyItemList())
    }
    // Create the lazy column
    ...
}

答案 1 :(得分:0)

看到的基本思想是让 compose 将列表视为状态。现在,您可以使用 mutableStateOf(initialValue) 来实现,

好的,流程是这样的,

我们创建一个变量,将它初始化为某个事物的可变状态

然后我们将该变量分配给惰性列。没有必要将它分配给列的 items 参数,但这是我们的用例。否则,在包含惰性列的 Composable 中,您只需键入变量的名称,即使这样也能工作,因为我们想要的只是 compose 以获取该变量正在被 Composable 读取的消息。

回到问题,

我们创建一个变量,比如 val mList: List<Int> by remember { mutableStateOf (listOf()) }

Lazycolumn{
items(items = mList){
Text(it)
}
}

Button(onClick = { mList = mList + listOf(mList.size())})

单击该按钮会向列表中添加一个新数字,这会反映在 LazyColumn 的 UI 中。