Jetpack Compose : Scrollable column with fractions-CodePudding

I have 3 elements in a column.

I want the 1st element to take 50% of screen and the remaining to take rest of space or scroll if needed.

I have tried the following:

Using verticallScroll() with fractions is not working. If i disable verticallScroll() then the 1st element takes 50% of the screen but the screen does not scrolls if needed.

 Column(
     modifier = Modifier
         .background(color = Color.Black)
         .padding(horizontal = 15.dp)
         .verticalScroll(state = rememberScrollState(), enabled = true)
         .fillMaxSize()

 ) {
     QuickTipsCard(
         modifier = Modifier
             .fillMaxWidth()
             .fillMaxHeight(0.5f),
         backgroundColor = LightBlue,
         title = "Good morning!",
         description = "0 out of 10 task today",
         titleStyle = Typography.h1
     )

}

CodePudding user response：

You can wrap the Column in a BoxWithConstraints component and use the maxHeight property to calculate the desired heights for the elements in the column.