How to use Jetpack Compose ConstraintLayout together with Column

Question

I'd like to test a simple layout in compose:

A ConstraintLayout (yellow) wrapping

• StickyTopText (green)
• a Scrolling View (gray)
• StickyBottomText (yellow)

I implemented it like this:

@Composable
@Preview
fun MapOverlay() {
    ConstraintLayout(
        modifier = Modifier
            .background(Color.Yellow)
            .fillMaxHeight()
    ) {

        val (stickyTop, scroller, stickyBottom) = createRefs()

        Text(text = "Sticky Top Text",
            modifier = Modifier
                .constrainAs(stickyTop) {
                    top.linkTo(parent.top)
                }
                .background(Color.Green)
        )

        Column(
            modifier = Modifier
                .constrainAs(scroller) {
                    top.linkTo(stickyTop.bottom)
                    bottom.linkTo(stickyBottom.top)
                    height = Dimension.fillToConstraints
                }
                .verticalScroll(rememberScrollState())
        ) {
            repeat(80) {
                Text(
                    text = "This is Test $it of 80",
                    modifier = Modifier
                        .fillMaxWidth()
                        .background(Color.LightGray)
                )
            }
        }

        Text(text = "Sticky Bottom Text",
                modifier = Modifier
                    .background(Color.Red)
                    .constrainAs(stickyBottom) {
                        bottom.linkTo(parent.bottom)
                    })
        }
    }

Most of it works pretty fine, except the list getting cut off at the end at item 77 instead of 80: (79; zero-Indexed)

What am i doing wrong? Or is this a bug? (I know i might do this via a scaffold, but that seemed over engineered. Also i would like to understand the issue, not circumvent it

Compose version 1.0.0-beta09

Answer 1

I checked your code and it's really not working on 1.0.0-alpha07, but it's working on 1.0.0-alpha08 (and compose 1.0.0-beta09) 😉

Also, is there any particular reason you're using ConstraintLayout? You can achieve the same result using this code:

Column(
    Modifier
        .background(Color.Yellow)
        .fillMaxHeight()
) {
    Text("Sticky Top Text", Modifier.background(Color.Green))
    Column(
        Modifier
            .weight(1f)
            .verticalScroll(rememberScrollState())
    ) {
        repeat(80) {
            Text(
                "This is Test ${it + 1} of 80",
                Modifier
                    .fillMaxWidth()
                    .background(Color.LightGray)
            )
        }
    }
    Text("Sticky Bottom Text", Modifier.background(Color.Red))
}