Очищення всіх прапорців у LazyColumn Compose за допомогою кнопки в іншому композиції

3 Березня 2024 в 14:34 22

У світі мобільних додатків інтерфейс є одним з ключових елементів, який визначає зручність використання продукту для користувача. Однією з нових технологій, що значно спрощує розробку інтерфейсів в Android-додатках, є Jetpack Compose.

Однією з типових задач при створенні інтерфейсів є робота з прапорцями (checkboxes). У відповідному випадку, ми розглянемо, як очистити всі прапорці у LazyColumn Compose за допомогою кнопки в іншому композиції. Це може бути корисно, наприклад, у випадку вибору кількох елементів списку і подальшого їх очищення за допомогою однієї кнопки.

Зараз Jetpack Compose є однією з найбільш використовуваних бібліотек для розробки інтерфейсів у додатках для Android. Його основна перевага полягає в декларативному підході до створення інтерфейсів, що робить код більш зрозумілим та легким у розробці.

У додатку, який ми розглядатимемо, ми матимемо список об’єктів, кожен з яких має прапорець, який можна вибирати або скасовувати вибір. Цей список буде відображатися за допомогою LazyColumn Compose. Для зручності кожен об’єкт буде відображатися окремо, і ми хочемо мати можливість очистити всі прапорці одночасно.

Для досягнення цієї мети ми використовуватимемо два основні композиції: ParentItemComposable і ClearAllButton. ParentItemComposable відображає список об’єктів разом із прапорцями, які можна вибирати. ClearAllButton – це кнопка, яка буде очищати всі прапорці в ParentItemComposable.

@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,
            )
        }
    }
}

100

101

102

103

104

105

106

107

108

109

110

@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,

)

}

Очікувано, що ClearAllButton буде спрацьовувати та очищати всі прапорці, встановлені в ParentItemComposable LazyColumn.

Останні новини

Затримано підозрюваного у вчиненні умисного заподіяння тілесних ушкоджень патрульному поліцейському в Вознесенському районі

14 Серпня 2023 в 14:49

Підвищення цін на проїзд в приміському автотранспорті

20 Липня 2023 в 20:26

Прем’єри тижня: “Барбі” та “Оппенгеймер”

17 Липня 2023 в 21:15

Читайте також

Як отримати від 100 грн за реєстрацію в ПУМБ

14 Серпня 2023 в 15:14

Як отримати від 100 грн за реєстрацію в Sense SuperApp (Альфа-Банк)

3 Липня 2023 в 13:22

Як економити на онлайн-покупках с кешбек-сервісом LetyShops

3 Липня 2023 в 13:04