如何根据数据类属性更新lazyColumn项目的颜色？

Question

首先，itemBackgroundColor是正确的，有些项目是蓝色的，有些是灰色的。

但是当列表更新并且某些 item.judge 发生变化时，itemBackgroundColor 将不会相应更新。

当 list 更新时，如何更新 itemBackgroundColor？多谢！

@Composable
fun LayoutsCodelab(viewModel: MyViewModel) {
// list<Item>, Item contains name, judge
val list = viewModel.myList.observeAsState(listOf()).value

Scaffold {
    LazyColumn(state = rememberLazyListState()) {
        items(list.size) {
            val item = list[it]

            // How can I update itemBackgroundColor based on item.judge?
            val itemBackgroundColor by mutableStateOf(
                if (item.judge) Color.Blue else Color.Gray)
            
            // apply itemBackgroundColor  here
            Row(modifier = Modifier.background(color = itemBackgroundColor)) {
                //other detail codes ...
            }
        }
    }
}
}

Answer 1

首先，除非您的用例严格要求，否则不要使用 LiveData。

在您的 ViewModel 中，您可以像这样创建一个列表，

class MVVM : ViewModel(){
 var itemsList = mutableStateListOf<Item>()
}

然后，在您的活动中，您可能不应该传递整个视图模型，但这完全取决于您。因此，在这种情况下，

@Composable
fun LayoutsCodelab(viewModel: MyViewModel) {
val list = viewModel.itemsList

Scaffold {
    LazyColumn(state = rememberLazyListState()) {
        items(list.size) {
            val item = list[it]

            // Don't use mutableStateOf willy-nilly,
            /*val itemBackgroundColor by mutableStateOf(
                if (item.judge) Color.Blue else Color.Gray)*/
            
            Row(modifier = Modifier.background(color = if(item.judge) ColorBlue else Color.Gray)) {
                //other detail codes ...
            }
        }
    }
}

您不需要在原始代码中调用 mutableStateOf 的地方使用它。请考虑使用 State-in-Compose Codelab 来进一步学习。

另外，我认为如果项目是按照更新的列表呈现的，即使没有这些修改，您的代码实际上也应该可以正常工作，但问题（我确信大约 2/3）可能在于“其他代码详细信息... ”部分，其中存在的可组合项可能会占用item的整个空间，因此隐藏其修改后的背景。考虑将此背景修改器也应用到那里的子可组合项，然后检查它是否有效。