I want to make API data appear in groups inside a LazyColumn. I've achieved my purpose when the required API data is a List of Lists of Objects response, but I don't have any idea how to make it work as wanted if the API data is a List of Lists of Objects. As I cannot make a nested LazyColumn, the next code sample makes the data appear but never scroll. Below, I have attached some code samples to explain.
Here is the problem
@Composable
fun CupStandingExpandableGroup(
mainViewModel: MainViewModel = hiltViewModel(),
standingsItemList: List<StandingsItemItem?>,
standingsItemListOfList: List<List<StandingsItemItem?>?>?,
headerItem: @Composable ()-> Unit,
keys: @Composable ()-> Unit
) {
var expandedState by remember { mutableStateOf(true) }
val rotationState by animateFloatAsState(
targetValue = if (expandedState) 180f else 0f, label = ""
)
Column {
standingsItemListOfList!!.forEach {
mainViewModel.standingsListTournament.value = it!!
val groupedStandingsList = mainViewModel.standingsListTournament.value.groupBy { it!!.group }
LazyColumn {
item { headerItem() }
groupedStandingsList.forEach { (group, items) ->
item {
Card(
modifier = Modifier
.fillMaxWidth()
.animateContentSize(
animationSpec = tween(
durationMillis = 3000,
easing = LinearOutSlowInEasing
)
),
shape = RoundedCornerShape(15.dp),
onClick = {
expandedState = !expandedState
}
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(4.dp)
) {
Row(
verticalAlignment = Alignment.CenterVertically
) {
Text(
modifier = Modifier
.weight(6f),
text = group!!,
fontSize = 13.sp,
fontWeight = FontWeight.SemiBold,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
IconButton(
modifier = Modifier
.weight(1f)
.alpha(ContentAlpha.medium)
.rotate(rotationState),
onClick = {
expandedState = !expandedState
}) {
Icon(
imageVector = Icons.Default.ArrowDropDown,
contentDescription = "Drop-Down Arrow"
)
}
}
}
}
}
if (expandedState) {
itemsIndexed(
items,
itemContent = { index, item ->
StandingRow(standingsItem = item!!)
}
)
}
}
item { keys() }
}
}
}
}
List of Lists of Objects
[
[
{
},
{
}
],
[
{
},
{
}
],
[
{
},
{
}
]
]
Grouped Items in Lazycolumn for List of objects
val list = viewModel.mainList.value.groupBy { it!!.league!!.id }
if (myList.isNotEmpty()) {
LazyColumn(
modifier = Modifier
.padding(3.dp)
.fillMaxSize()
) {
myList.forEach { (league, items) ->
item {
TodayMatchesHeader(leagueItem = items[0]!!, league = league!!)
}
itemsIndexed(items,
itemContent = { index, item ->
TodayMatchesRow(
item,
onClick = {
//
}
)
}
)
}
}
}
List of Objects
[
{
},
{
},
{
}
]
Well, I was able to reach the desired goal of making a LazyColumn with expandable lists. Here is the solution: