CODEWITHSUNDEEP
androidkotlinandroid-jetpack-composelazycolumnandroid-jetpack-compose-lazy-column
user19095510
user19095510

Reputation: 165

Jetpack Compose LazyColumn reverse display

native composable column with elements a, b and c:

a

b

c

how can you reverse arrangement to:

c

b

a

in android jetpack compose

Upvotes: 6

Views: 3813

Answers (1)

z.g.y
z.g.y

Reputation: 6257

You can use LazyColumn's reverseLayout parameter if you want to preserve your collection's structure while having a reversed display.

Say you have these items.

val items = listOf("Apple", "Banana", "Cherry", "Dogs", "Eggs", "Fruits")

ItemList(items = items)

Just set LazyColumn's reverseLayout to true

@Composable
fun ItemList(items: List<String>) {

    LazyColumn(
        reverseLayout = true
    ) {
        items(items) { item ->
            Box(modifier = Modifier
                .height(80.dp)
                .fillMaxWidth()
                .border(BorderStroke(Dp.Hairline, Color.Gray)),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = item
                )
            }
        }
    }
}

enter image description here

Upvotes: 15

Related Questions