Jetpack Compose how to clear all checkboxes in lazycolumn compose using a button in a different composable

Question

I am looking for a solution on how to clear all checkboxes in lazycolumn compose using a button in a different composable.

So what I am trying to do it that one can check one or multiple checkboxes in the ParentItemComposable that are under the ObjectComposable. Then be able to clear all selections using the ClearAllButton composable

This is the code I have tried below

@Composable
fun ParentItemComposable(
    reload: Boolean,
    viewModel: EtfFilterViewModel,
    modifier: Modifier = Modifier

) {
    val itemsList by remember {
        mutableStateOf(etfFilterViewModel.getEParentList)
    }
    Column() {

        LazyColumn(
            Modifier
                .background(color = PaleGrey50)
                .padding(bottom = 80.dp)
        ) {

            items(itemsList.sortedBy { it.title }) { parentItem ->
                val title: String = when (parentItem.title) {
                    "geography" -> {
                        "Geography"
                    }

                    "assetClass" -> {
                        "Asset Class"
                    }

                    "focusStyle" -> {
                        "Focus / Style"
                    }

                    else -> {
                        "Other"
                    }
                }
                Box(
                    modifier = Modifier
                        .padding(0.dp, 0.dp, 0.dp, 5.dp)
                        .fillMaxWidth()
                        .background(color = White)
                ) {
                    Text(
                        text = title,
                        modifier = Modifier.padding(5.dp),
                        style = MaterialTheme.typography.h6
                    )
                }

                Column(modifier = Modifier.padding(start = 16.dp)) {
                    parentItem.filterObjectList.sortBy {
                        it.name
                    }
                    parentItem.filterObjectList.forEach { filterObject ->

                        ObjectComposable(
                            filterObject,
                            viewModel,
                            itemsList.indexOf(parentItem),
                            parentItem.filterObjectList.indexOf(filterObject),
                        )
                    }
                    parentItem.filterObjectList.filter { i -> i.isChecked }
                }
            }
        }
    }
}


@Composable
private fun ObjectComposable(
    filterObject: FilterObject,
    viewModel: ViewModel,
    …..
) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        val checkedState = remember { mutableStateOf(false) }
        val context = LocalContext.current
        Checkbox(
            checked = checkedState.value,
            onCheckedChange = {
                checkedState.value = it
                ….
                viewModel.updateFilteredListOfStrings(filterObject.name)
            },
            enabled = true,
            modifier = Modifier.padding(end = 8.dp)
        )
        Text(text = efilterObjectname)
    }
}


@Composable
fun ClearAllButton(
    onButtonClick: () -> Unit,
    modifier: Modifier = Modifier,
) {
    Row(
        verticalAlignment = Alignment.Bottom
    ) {
        Button(
            onClick = { onButtonClick() },
            modifier = Modifier
                .wrapContentHeight()
                .fillMaxWidth()
                .padding(16.dp),
            contentPadding = PaddingValues(16.dp),
            colors = ButtonDefaults.buttonColors(
                backgroundColor = PaleGrey50,
                contentColor = Secondary
            ),
            border = BorderStroke(1.dp, color = Secondary),
            shape = RoundedCornerShape(4.dp),
        ) {
            Text(
                text = stringResource(R.string.clear_all),
                fontSize = FontSize.Small,
                fontWeight = FontWeight.Bold,
            )
        }
    }
}

What I am expecting is that ClearAllButton composable will clear all Checkboxes checked in ParentItemComposable lazycolum

Answer 1

You can use MutableStateList in your viewModel holding your data entity containing a boolean variable that checkBox observe.then you can iterate the list and modify it's item by means of invoking the copy method of the Kotlin Data Class.

MutableStateList is a state list, so if it's value change a composition reading it's item will recompose.

Firstly, you create a MutableStateList in your ViewModel holding your data entity namely parentItem. Secondly, you modify the construction of your parentItem, adding a boolean variable which your checkBox composable read. Thirdly, you invoke the items method in LazyColumn directly passing the list as the argument which controls how many items will be drawn. Finally, your checkBox read the boolean variable contained in your parentItem, Then you can alter the boolean variable to control the state of the checkbox.