How to make a lazy column item occupy the complete height in Jetpack compose?
Asked Answered
B

1

25

I am trying to work with the compose lazy column, i want each item of my lazy column to have the maximum height , I tried the below code but it is not giving the expected result

Code

val itemsList: List by mainScreenViewModel.portfolioItems.observeAsState(listOf())

Box(modifier = Modifier.fillMaxSize()) {
    Column(modifier = Modifier.matchParentSize()) {
        LazyColumn(
            content = {
                itemsIndexed(itemsList) { index, item ->
                    Text(text = "Hello", modifier = Modifier.fillMaxHeight())
                }
            },
        )
}
}
Brolly answered 5/4, 2021 at 8:5 Comment(0)
D
47

fillMaxHeight()/fillMaxWidth() do not work correctly for vertical and horizontal scrolling list respectively. Instead we can use fillParentHeight() and fillParentWidth() respectively provided in LazyItemScope.

Sample Code:

LazyColumn(
     modifier = modifier.fillMaxHeight()) {
         items(count = 3) {
             Column(modifier = Modifier.fillParentMaxHeight()) {
                 Text(
                     text = "Item $it", 
                     modifier = Modifier.fillMaxWidth()
                 )
                 Divider(Modifier.height(2.dp))
            }
     }
}

Refer for more details: https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyItemScope

Delight answered 3/9, 2021 at 11:8 Comment(2)
It didn't work for me.Sleight
in this case it is being shown under keyboard, though I just wanted to show text at the center, there are many empty space at the top and at the bottomManufactory

© 2022 - 2024 — McMap. All rights reserved.