Очищення всіх прапорців у LazyColumn Compose за допомогою кнопки в іншому композиції
3 Березня 2024 в 14:34 91
У світі мобільних додатків інтерфейс є одним з ключових елементів, який визначає зручність використання продукту для користувача. Однією з нових технологій, що значно спрощує розробку інтерфейсів в Android-додатках, є Jetpack Compose.
Однією з типових задач при створенні інтерфейсів є робота з прапорцями (checkboxes). У відповідному випадку, ми розглянемо, як очистити всі прапорці у LazyColumn Compose за допомогою кнопки в іншому композиції. Це може бути корисно, наприклад, у випадку вибору кількох елементів списку і подальшого їх очищення за допомогою однієї кнопки.
Зараз Jetpack Compose є однією з найбільш використовуваних бібліотек для розробки інтерфейсів у додатках для Android. Його основна перевага полягає в декларативному підході до створення інтерфейсів, що робить код більш зрозумілим та легким у розробці.
У додатку, який ми розглядатимемо, ми матимемо список об’єктів, кожен з яких має прапорець, який можна вибирати або скасовувати вибір. Цей список буде відображатися за допомогою LazyColumn Compose. Для зручності кожен об’єкт буде відображатися окремо, і ми хочемо мати можливість очистити всі прапорці одночасно.
Для досягнення цієї мети ми використовуватимемо два основні композиції: ParentItemComposable і ClearAllButton. ParentItemComposable відображає список об’єктів разом із прапорцями, які можна вибирати. ClearAllButton – це кнопка, яка буде очищати всі прапорці в ParentItemComposable.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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.
Останні новини
Читайте також
