如何从jetpack中的惰性列中删除项

Question

我构建了一个从ViewModel获取它的数据的惰性列，每当我添加一个条目时，懒惰列重新组合，新条目在惰性列中被查看，但是当我添加删除项目的功能时，惰性列不会重新组合，被删除的项将一直保留在屏幕上，直到发生配置更改(比如旋转屏幕)。

我的问题是如何使懒惰列知道列表在每次删除操作后都已更新。。

下面是ViewModel：

import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel
import com.example.shoppinglistcompose.entities.Item

class AddNewShoppingListViewModel : ViewModel() {

val items = MutableLiveData<MutableList<Item>>(mutableListOf())

fun addNewItem(newItem: Item) {
    items.value = items.value?.plus(listOf(newItem)) as MutableList<Item>?
}

fun removeItem(item: Item) {
    items.value!!.remove(item)
    items.value = items.value?.plus(listOf()) as MutableList<Item>?
}
}

，显示延迟列的Compsable：

content = { paddingValues ->
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier
                .fillMaxSize()
                .padding(8.dp)
        ) {
            OutlinedTextField(
                value = text,
                onValueChange = { textFieldsViewModel.onShoppingListNameChanged(it) },
                label = { Text(text = "Shopping list Name") },
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(start = 30.dp, end = 30.dp, bottom = 8.dp)
            )
            if (!items.value?.isEmpty()!!) {
                LazyColumn(
                    Modifier
                        .animateContentSize()
                        .fillMaxSize()
                        .padding(paddingValues)
                ) {
                    items(items = items.value!!) {
                        SingleItem(item = it) {
                            addNewShoppingListViewModel.removeItem(it)
                        }
                    }
                }

            } else {
                Box(
                    modifier = Modifier
                        .fillMaxSize(),
                    contentAlignment = Alignment.Center
                ) {
                    Text(
                        text = "There are no shopping Items",
                        color = Color.Red,
                        style = MaterialTheme.typography.h5
                    )
                }
            }
        }
        if (showDialog.value) {
            MyDialog(
                showDialog = showDialog,
                textFieldsViewModel = textFieldsViewModel,
            ) {
                val name = textFieldsViewModel.shoppingItemText.value
                val quantity = textFieldsViewModel.itemQuantityText.value
                val item = Item(0, name!!, quantity!!.toInt(), 0)
                addNewShoppingListViewModel.addNewItem(item)
                textFieldsViewModel.shoppingItemText.value = ""
                textFieldsViewModel.itemQuantityText.value = ""
                showDialog.value = !showDialog.value
            }
        }

    },

下面是它自己的项目的可组合的乐趣：

@Composable
fun SingleItem(item: Item, deleteClick: () -> Unit) {
val composableScope = rememberCoroutineScope()
val new: MutableState<Boolean> = remember {
    mutableStateOf(true)
}
val color = remember { Animatable(Color(0xFFB9F6CA)) }
LaunchedEffect(new.value) {
    color.animateTo(if (new.value) Color(0xFFB9F6CA) else Color(0xFFE0F2F1))
}
Card(
    modifier = Modifier
        .padding(4.dp)
        .fillMaxWidth(),
    shape = RoundedCornerShape(8.dp),
    backgroundColor = color.value,
    elevation = 3.dp
) {
    composableScope.launch {
        delay(2000)
        new.value = false
    }
    Row(modifier = Modifier.fillMaxWidth() , horizontalArrangement = Arrangement.SpaceBetween) {
        Column(
            modifier = Modifier,
            horizontalAlignment = Alignment.Start,
            verticalArrangement = Arrangement.SpaceBetween
        ) {
            Text(text = item.name, style = MaterialTheme.typography.h5)
            Text(text = "${item.quantity}", style = MaterialTheme.typography.h6)
        }
        IconButton(onClick = deleteClick) {
            Icon(Icons.Rounded.Delete, "Button for deleting an Item of the items list.")
        }
    }

}

}

Answer 1

试着换掉线路，

items.value!!.remove(item)
items.value = items.value?.plus(listOf()) as MutableList<Item>?

带着，

items.value = items.value?.filter { it != item }?.toMutableList()

问题是表达式items.value?.plus(listOf())不会产生不同的实例，并且ViewModel不会重新发布值，因为它是前一个值的==。这是因为Kotlin只会分配一个新的列表，如果一个列表表达式的操作方不等同于结果的话。

上面filter的使用确保了如果item在列表中，就会生成一个新的列表。