Jetpack compose, constraint layout with one item scroll vertically inside

Question

In nutshel: I wanna 3 part of view fixed to screen but center part can scroll inside when has lots of children but other parts fixed.

I wanna have a fixed top ( it's not header of app so no need scaffold here) and bottom layout that have center scrollable view. But dono why can not achieve this? Seems calculating child has a problem. This is what I implemented with constraint layout:

ConstraintLayout(Modifier.fillMaxSize()) {



    val (header, content, key) = createRefs()

    Box(Modifier.constrainAs(header) {
        start.linkTo(parent.start)
        end.linkTo(parent.end)
        top.linkTo(parent.top)
        bottom.linkTo(content.top)
    }) {

        Header(
            item = presenter?.getPairModel(),
        )
    }




    Column(
        Modifier
            .verticalScroll(rememberScrollState())
            .fillMaxWidth()
            .constrainAs(content) {
                start.linkTo(parent.start)
                end.linkTo(parent.end)
                top.linkTo(pair.bottom)
                bottom.linkTo(key.top)
            },
        horizontalAlignment = Alignment.CenterHorizontally

    ) {
        ... lots of views I wanna have scrollable here
    }



    Box(
        contentAlignment = Alignment.BottomCenter,
        modifier = Modifier.constrainAs(key) {
            start.linkTo(parent.start)
            end.linkTo(parent.end)
            bottom.linkTo(parent.bottom)
        }

    ) {

    // my bottom fixed view
    }
}

I did test with lots of ways, even with Column with passing weight 1F to my bottom view but always can not make content view scrollable.

Answer 1

Use the weight modifier on your Column :

Column(Modifier.fillMaxSize()) {
   // Fixed content here
   
   Column(
       Modifier.fillMaxWidth().weight(1f).verticalScroll(rememberScrollState())
   ) {
       // your scrollable content here
   }


   // Fixed content here
}