Compose中mutableStateList转换后UI不更新问题求助

问题描述 #

我需要把mutableStateListOf<MyClass>转换成mutableStateListOf<MyAnotherClass>并在Compose中渲染，但遇到了UI更新异常：

• 使用原列表myOriginalList的LazyRow，在列表增删项或MyClass的url更新时能自动重组UI
• 转换后的anotherList对应的LazyColumn，在上述场景下不会触发UI重组

代码片段 #

ViewModel代码 #

// MyViewModel.kt
private val _myOriginalList = mutableStateListOf<MyClass>()
val myOriginalList: List<MyClass> = _myOriginalList

fun myProcessor(uris: List<String>) {
      val tempList = uris.map { MyClass(uri = it) }
      _myOriginalList.addAll(tempList)

     tempList.map { item ->
            myProcessor(item) { resultUrl ->
                 item.url = resultUrl
            }
     }
}

Compose视图代码 #

fun MyComposeView(myOriginalList: List<MyClass>) {
        LazyRow {
              items(items = myOriginalList) {
                   // UI组件... <-- 此部分能自动获取url，且增删项时更新UI，为何？
             }
        }

        val anotherList = remember(myOriginalList) {
                myOriginalList.map { item -> MyAnotherClass(item.uri, item.url) }.toMutableStateList()  
        }

       LazyColumn {
            items(anotherList) {
                 // UI组件 <--- 当url更新或增删项时，此部分不重组，为何？
           }
      }
}

已尝试的方案 #

方案1：将MyClass的url改为MutableState #

@Parcelize
data class MyClass(
    val url: @RawValue MutableState<String?> = mutableStateOf(null),
    var uri: String? = null
)

方案2：用LaunchedEffect更新anotherList #

// 在Compose视图中
LaunchedEffect(myOriginalList) {
    anotherList.clear()
    anotherList.addAll(
      myOriginalList.map { item -> MyAnotherClass(item.uri, item.url) }.toMutableStateList()
    )
}

方案3：直接操作ViewModel中的列表项 #

// MyViewModel.kt
for(uri in uris) {
    _myOriginalList.indexOfFirst { it.uri == uri }.takeIf { it != -1 }?.let {
        myProcessor(_myOriginalList[it]) { url -> 
            _myOriginalList[it].url.value = url
        }
    }
}

我的需求 #

• anotherList必须为MutableList<MyAnotherClass>类型
• 当resultUrl被设置或myOriginalList增删项时，对应的UI需自动重组

问题分析与解决方案 #

原因分析 #

1. 原列表能更新的原因：_myOriginalList是mutableStateListOf，属于可观察集合——集合增删项时会触发重组；如果MyClass的url是MutableState，单个item的url.value变化时，LazyRow的对应元素会因读取到状态变化触发重组。
2. anotherList不更新的原因：
   • remember(myOriginalList)仅在myOriginalList的引用变化时重新计算，但mutableStateListOf的引用不会因内部元素变化改变，因此只有首次初始化或整个列表被替换时才会重新生成anotherList。
   • 即使手动用LaunchedEffect更新，若MyClass的url不是可观察状态，myOriginalList引用未变，LaunchedEffect不会触发；另外MyAnotherClass如果是普通数据类，直接修改其属性也无法被Compose感知。

符合需求的解决方案 #

方案一：基于derivedStateOf实现自动同步

fun MyComposeView(myOriginalList: List<MyClass>) {
    // 原LazyRow代码保持不变
    
    val anotherList by remember {
        derivedStateOf {
            myOriginalList.map { item -> 
                MyAnotherClass(item.uri, item.url.value) 
            }.toMutableStateList()
        }
    }

    LazyColumn {
        items(anotherList) {
            // UI组件
        }
    }
}

• derivedStateOf会监听myOriginalList的集合变化（增删项）以及每个item.url.value的变化，任何依赖项变更都会重新生成anotherList。
• 通过by委托将State<MutableList<MyAnotherClass>>转换为可直接使用的列表，LazyColumn能感知到变化并触发重组。

方案二：支持手动修改的同步方案

如果需要在Compose中手动增删anotherList的元素，可结合mutableStateListOf和LaunchedEffect实现双向同步：

fun MyComposeView(myOriginalList: List<MyClass>) {
    // 原LazyRow代码保持不变
    
    val anotherList = remember { mutableStateListOf<MyAnotherClass>() }

    // 监听原列表的增删和元素url变化
    LaunchedEffect(myOriginalList.size, myOriginalList.map { it.url.value }) {
        val newList = myOriginalList.map { 
            MyAnotherClass(it.uri, it.url.value) 
        }
        anotherList.clear()
        anotherList.addAll(newList)
    }

    LazyColumn {
        items(anotherList) {
            // UI组件
        }
    }
}

• LaunchedEffect的key包含myOriginalList.size（监听增删项）和myOriginalList.map { it.url.value }（监听每个item的url变化），任一key变更都会触发anotherList更新。
• 此方案下anotherList既是MutableList<MyAnotherClass>，能响应原列表的自动变化，同时支持本地手动修改。

内容的提问来源于stack exchange，提问作者SilleBille