在 Jetpack Compose 中使用复选框选择搜索列表答案

【问题标题】：Searching a List with Check Box Selection in Jetpack Compose在 Jetpack Compose 中使用复选框选择搜索列表
【发布时间】：2022-08-24 18:45:07
【问题描述】：

目前有一个带有文本的惰性列以及自定义复选框。我目前可以使用以下代码维护惰性列中的复选框选择。即使在滚动（向上/向下）期间，它也能够保持复选框选择的状态。

var baseCodes: MutableList<String> = arrayListOf()
val cmdList: List<MetaData> = mainViewModel.cmdList
val indexList: MutableList<Boolean> = MutableList(cmdList.size) { false }

LazyColumn() {
        itemsIndexed(cmdList) { index: Int, cmd ->
            MetaDataCard(
                cmd = cmd,
                navController = navController,
                mainViewModel = mainViewModel,
                indexList,
                index
            ) {
                if (it) {
                    baseCodes.add(cmd.code)
                } else {
                    baseCodes.remove(cmd.code)
                }
                categoryViewModel.baseCodes = baseCodes
            }
        }
    }

我已经实现了带有以下逻辑的文本搜索。

 val cmdList: List<MetaData> = mainViewModel.cmdList
    val filteredList: List<MetaData>
    val searchText = textState.value.text

    filteredList = if (searchText.isEmpty()) {
        cmdList
    } else {
        val resultList = cmdList.filter { x ->
            x.name!!.contains(searchText, true) || x.code.contains(searchText, true)
        }
        resultList
    }

val indexList: MutableList<Boolean> = MutableList(filteredList.size) { false }
 LazyColumn() {
        itemsIndexed(filteredList) { index: Int, cmd ->
            MetaDataCard(
                cmd = cmd,
                navController = navController,
                mainViewModel = mainViewModel,
                indexList,
                index
            ) {
                if (it) {
                    baseCodes.add(cmd.code)
                } else {
                    baseCodes.remove(cmd.code)
                }
                categoryViewModel.baseCodes = baseCodes
            }
        }
    }

元数据卡如下

fun MetaDataCard(
    cmd: MetaData,
    navController: NavController,
    mainViewModel: MainViewModel,
    completedList: MutableList<Boolean>,
    index: Int,
    processChange: (checked: Boolean) -> Unit
) {
    val isSelected = rememberSaveable { mutableStateOf(completedList[index]) }

    Card(
        modifier = Modifier
            .fillMaxWidth()
            .clip(RoundedCornerShape(8.dp)),
        elevation = 10.dp,
        backgroundColor = Color.White
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp),
            verticalAlignment = Alignment.CenterVertically
        )
        {
           
            Column() {
                Text(
                    text = cmd.name,
                    color = Color.Gray,
                    style = Typography.body2
                )
                Text(
                    text = cmd.code,
                    Modifier.padding(0.dp),
                    color = MaterialTheme.colors.onPrimary,
                    style = Typography.body1,
                )
            }
            Spacer(modifier = Modifier.weight(0.8f))
            CustomCheckBox(
                checked = isSelected.value,
                onCheckedChange = {
                    isSelected.value = !isSelected.value
                    completedList[index] = !isSelected.value
                    processChange(isSelected.value)
                },
            )
        }
    }
}

现在使用搜索选项，列表将根据搜索框中的文本进行过滤。但是，现在我可以搜索和过滤文本，但复选框选择不会保留并且会弄乱选择。

标签： android-jetpack-compose android-jetpack-compose-list

【解决方案1】：

利用

mutableStateListOf<Boolean>() as completedList

改变

val indexList: SnapshotStateList<Boolean> = mutableStateListOf()

或者您可以简单地将任何列表转换为可变状态列表

myList.toMutableStateList()

【讨论】：

它不工作。以上我都用过！谢谢你。

【解决方案2】：

我已经使用了您的代码，这是我为使其工作而进行的修改：如果显示的元数据在选定的元数据中，则向 Im 行发送所选元数据的列表，并在行 im 设置中选择 isSelected。它也适用于搜索和滚动

我为员工修改了它有趣的行（员工：EmployeeIdAndNameDTO， selectedEmployees：列表， processChange：（选中：布尔值）-> 单位 ) { var isSelected = selectedEmployees.contains(员工) ...

【讨论】：