Убедитесь, что щелчок по одному элементу разворачивает только этот элемент в макете LazyVerticalGrid. ⇐ Android

[Anonymous]

Я хочу внедрить пользовательский интерфейс в JetPack Compose , где у меня есть LazyverticalGrid. Когда я нажимаю на один элемент сетки, он должен развернуть и отображать подробный список (изначально скрытых) подэтмов этого элемента сетки, как показано на изображении:
расширяемая Lazy Grid < /p>
Как я могу получить нужный макет, с эффектом щелчка, ограничивающим себя нажатым элементом вместо всех элементов его столбца?
не удалось Попытка
Я попробовал решение с использованием Lazycolumn, но проблема в том, что метод Chunked предоставляет список списков с 3 элементами каждый. Это делает ряд расширять, но он ведет себя как 2D -массив. Я не могу найти индекс JTH, поэтому щелчок на один элемент заставляет все элементы в этом столбце одновременно < /strong>.

сетка в начальном состоянии
BR /> GRID со всеми элементами одного столбца расширены вместо одного элемента < /p>
@Composable
fun ExpandableGridUsingLazyColumn() {
val items = listOf(
CollapsableSection(
title = "Electronics & Appliances",
rows = listOf("Electronics", "Laptop Accessories", "Mobile Accessories")
),
CollapsableSection(
title = "Fashion",
rows = listOf("Mens Fashion", "Women's Fashion")
),
CollapsableSection(
title = "Furniture & Home Decor",
rows = listOf("Furniture", "Home & Garden")
),
CollapsableSection(
title = "Food & Beverages",
rows = listOf("Beverages", "Dairy & Bakery", "Grocery & Staples", "Snacks & Branded Food", "Vegetables & Fruits")
),
CollapsableSection(
title = "Health & Beauty",
rows = listOf("Bath Care", "Mens Care", "Personal Care")
),
CollapsableSection(
title = "Household & Cleaning Products",
rows = listOf("Cleaning Products", "Home Essentials")
),
CollapsableSection(
title = "Vehicle Accessories",
rows = listOf()
),
CollapsableSection(
title = "Sports & Fitness",
rows = listOf()
),
CollapsableSection(
title = "Toys, Books & Hobbies",
rows = listOf("Books & Stationary", "Toys")
)
) // Example data
val columns = 3 // Number of columns
val rows = remember(items) { items.chunked(columns) }
val collapsedState = remember { rows.map { true }.toMutableStateList() }
var itemIndex = 0

LazyColumn(
modifier = Modifier.fillMaxSize(),
contentPadding = PaddingValues(8.dp)
) {
rows.forEachIndexed { i, rowItems ->
item {
Column {
// Header Row
Row(
modifier = Modifier
.fillMaxWidth()
,
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
rowItems.forEachIndexed { index, item ->
Box(
modifier = Modifier
.weight(1f)
.aspectRatio(1f)
.background(Color.LightGray, shape = RoundedCornerShape(8.dp))
.clickable {
itemIndex = index
collapsedState[index] = !collapsedState[index]
}
,
contentAlignment = Alignment.Center
) {
Text(
text = item.title,
style = MaterialTheme.typography.bodyMedium
)
}
}
// Fill empty space if the row is not complete
repeat(columns - rowItems.size) {
Spacer(modifier = Modifier.weight(1f))
}
}

Spacer(modifier = Modifier.height(8.dp)) // Space between header rows

// Expanded Content
if (!collapsedState[itemIndex]) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(8.dp)
) {
rowItems[itemIndex].rows.forEach { item ->
Text(
text = "Details of Item $item",
modifier = Modifier
.padding(vertical = 4.dp)
.background(
Color(0xFFEFEFEF),
shape = RoundedCornerShape(4.dp)
)
.padding(8.dp)
)
}
}
}
}
}
}
}
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... grid-layou