CODEWITHSUNDEEP
androidandroid-jetpackandroid-jetpack-composeandroid-jetpack-compose-list
Akashdeep Singh
Akashdeep Singh

Reputation: 289

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

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

Upvotes: 28

Views: 20091

Answers (1)

Pradnesh Kore
Pradnesh Kore

Reputation: 629

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

Upvotes: 52

Related Questions