Jetpack Compose:列表更改时更新可组合

Posted

技术标签:

【中文标题】Jetpack Compose:列表更改时更新可组合【英文标题】:Jetpack Compose: Update composable when list changes 【发布时间】:2021-07-18 23:52:32 【问题描述】:

我在屏幕上有一个可组合的内容,其中显示了曲目项目(收藏夹)的列表:

var favourites: MutableList<Track> by mutableStateOf(mutableListOf())
@ExperimentalFoundationApi
@Composable
private fun ResultList(model: FreezerModel) 
    with(model) 
        if (favourites.isEmpty()) NoDataMessage("No favourites yet")
        else 
            LazyColumn(state = rememberLazyListState()) 
                items(favourites) 
                    TrackCard(it, model)
                
            
        
    

在点击事件时,我正在更新我的收藏夹列表(添加/删除项目)。我怎样才能让我的可组合立即反映这些变化(比如重新绘制自己或类似的东西)?到目前为止,它只在我第一次切换到另一个屏幕时才有效。

感谢您的意见!

【问题讨论】:

它应该与MutableStateList&lt;T&gt; 一起使用。使用 var favourites by mutableStateListOf&lt;Track&gt;() 感谢您的意见!这也适用于 Set 吗?我找不到任何实现... 集合没有顺序,因此不实现List&lt;T&gt;Array&lt;T&gt; 支持的Array&lt;T&gt;,因此不能直接用作items() 的参数。在这种情况下,每次更新时调用集合上的toList() 会起作用。 【参考方案1】:

您需要使用 MutableStateList&lt;T&gt; 以便 Compose 可以在状态更改时自动重新组合。

来自official doc:

注意:在 Compose 中使用可变对象(例如 ArrayList&lt;T&gt;mutableListOf())作为状态会导致您的用户在您的应用中看到不正确或过时的数据。

在您的代码中使用

val favourites by mutableStateListOf<Track>()

而不是

var favourites: MutableList<Track> by mutableStateOf(mutableListOf())

【讨论】:

太棒了,再次感谢您的意见!这也适用于 Set 吗?我找不到任何实现... 如果我需要列表列表呢? 就我而言,只有var canteens by mutableStateOf(mutableStateListOf&lt;Canteen&gt;()) 有效 LivedDataStateFlow 怎么样? ***.com/q/56658722/3466808.【参考方案2】:

只需从 lazyColumnFor 参数列表中删除 state = rememberLazyListState() 就应该适用于您的情况。

根据文档,如果我们使用rememberLazyListState() 那么:-

对提供的初始值的更改将不会导致重新创建状态或以任何方式更改已创建的状态。

这样做后,通常更新列表应该可以正常工作。将不可变列表 (list) 而不是 mutableList 公开给可组合对象也是一个好习惯。

例如使用:-

var favourites by mutableStateOf(listOf<FavoriteItem>())

然后add/remove/update 使用列表:-

favourites = favourites + newList // add 
favourites = favourites.toMutableList().also  it.remove(item)  // remove
 

【讨论】:

感谢您的意见!这也适用于 Set 吗?我找不到任何实现...

以上是关于Jetpack Compose:列表更改时更新可组合的主要内容,如果未能解决你的问题,请参考以下文章

Jetpack Compose 数字输入

Jetpack Compose - LazyVerticalGrid

如何在Jetpack Compose中更改topBar对应的屏幕

Jetpack Compose – LazyColumn 不重组

Jetpack compose 更新到 1.0.0-rc01 后无法预览

Jetpack Compose,设置新数据时如何重置 LazyColumn 位置?