时间戳

首页 > 解决方案 > 如何从jetpack compose中的惰性列中删除项目

android - 如何从jetpack compose中的惰性列中删除项目

问题描述

我构建了一个从 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
            }
        }

    },

这是 Item it self 的可组合乐趣：

@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.")
        }
    }

}

}

标签： androidkotlinandroid-jetpackandroid-jetpack-compose

解决方案

换线试试

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在列表中，则生成一个新列表。

推荐阅读