Home > Enterprise >  How to fill row nested in lazycolumn. JetpacCompose
How to fill row nested in lazycolumn. JetpacCompose

Time:04-19

I make my own and very simple calendar. Problem: I'm trying to display values ​​from a list. There are seven values ​​in one line. Each new line continues the list. Below is an example of invalid code. But he shows the essence and the problem)

          //.....
          LazyColumn (
            modifier = Modifier,
            content = {
                items(7) { row ->
                    Row {
                        for(n in 0..6){Text("${weeks1[n]}")}
                    }
                }
            }
        )

output:Result dates

Update with alternative solution

A solution with LazyColumn and Row with the same result (more difficult to achieve, less elegant)

val dates = MutableList(35) { if (it   1 > 31) -1 else it   1 }
val chunks = dates.chunked(7)

LazyColumn(
    Modifier
        .fillMaxSize()
        .systemBarsPadding()
) {
    items(chunks) {
        Row(
            Modifier
                .fillMaxWidth()
                .padding(vertical = 8.dp),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            it.forEach { date ->
                Box(Modifier.size(24.dp), contentAlignment = Alignment.Center) {
                    if (date != -1) Text(text = "$date")
                }
            }
        }
    }
}

CodePudding user response:

You can achieve the same using staggered grid layout. One of Google's Compose sample Owl shows how to do a staggered grid layout. Also you can go through this answer.

  • Related