Jetpack Compose LazyColumn reverse display

Question

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

Asper

Reverse the list that has the items you're passing to the column composable – Unheard

Answer 1

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
                )
            }
        }
    }
}

Janeyjangle

If you want list should start from bottom then you should set alignment as bottom. LazyColumn(modifier = Modifier.fillMaxWidth().align(alignment = Alignment.BottomCenter),reverseLayout = true) – Ventilation