Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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())
                }
            },
        )
}
}
like image 455
Akashdeep Singh Avatar asked Apr 05 '21 08:04

Akashdeep Singh


People also ask

How is a LazyColumn different than a regular Column?

As the name suggests, the difference between LazyColumn and LazyRow is the orientation in which they lay out their items and scroll. LazyColumn produces a vertically scrolling list, and LazyRow produces a horizontally scrolling list. The Lazy components are different to most layouts in Compose.

How do you make a Column scrollable in jetpack compose?

Android Compose – Enable Vertical Scroll for Column To enable Column to allow to scroll vertically when the height of the content inside Column is bigger than the allowed height/constraints, use Modifier. verticalScroll() for the Column modifier parameter.

What is scaffold in jetpack compose?

Scaffold provides a slot for a floating action button. You can use the floatingActionButton slot and a FloatingActionButton : Scaffold(


1 Answers

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

like image 135
Pradnesh Kore Avatar answered Nov 15 '22 00:11

Pradnesh Kore