Android Compose ConstraintLayout issue

Question

compose version: 1.0.0-beta04 .

constraintlayout-compose version: 1.0.0-alpha05 .

composable:

@Composable
fun comp1() {
    Surface(Modifier
        .fillMaxWidth()
        .height(50.dp), color = Color.Red) {

        ConstraintLayout(Modifier.fillMaxSize()) {
            val guide_line = createGuidelineFromAbsoluteRight(.2f)
            val (icon_ref, box_ref, spacer_ref) = createRefs()
            
            Icon(Icons.Filled.Search, null,
                modifier = Modifier.constrainAs(icon_ref) {
                    absoluteLeft.linkTo(guide_line)
                    absoluteRight.linkTo(parent.absoluteRight)
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                }
            ) 

            Box(Modifier
                .background(Color.Blue)
                .fillMaxSize()
                .constrainAs(box_ref) {
                    absoluteLeft.linkTo(parent.absoluteLeft)
                    absoluteRight.linkTo(guide_line)
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                }) {}

            Spacer(Modifier
                .background(Color.Yellow)
                .width(2.dp)
                .fillMaxHeight()
                .constrainAs(spacer_ref) {
                    absoluteRight.linkTo(guide_line)
                })
        }
    }

}

preview:

as you can see, the items are not constrained as one would expect. the views in the view_based ConstraintLayout wouldn't draw outside of the screen unless the constraints are messed up or it was intentional.

Answer 1

In the Box composable remove the fillMaxSize() modifier and apply the constraint width = Dimension.fillToConstraints .

Something like:

Surface(Modifier
    .fillMaxWidth()
    .height(50.dp), color = Color.Red) {

    ConstraintLayout(Modifier.fillMaxSize()) {
        val guide_line = createGuidelineFromAbsoluteRight(.2f)
        val (icon_ref, box_ref, spacer_ref) = createRefs()

        Icon(Icons.Filled.Search, null,
            modifier = Modifier.constrainAs(icon_ref) {
                start.linkTo(guide_line)
                end.linkTo(parent.end)
                top.linkTo(parent.top)
                bottom.linkTo(parent.bottom)
            }
        )

        Box(contentAlignment=Alignment.CenterStart,
            modifier = Modifier
            .background(Color.Blue)
            .fillMaxHeight()
            .constrainAs(box_ref) {
                start.linkTo(parent.start)
                end.linkTo(guide_line)
                top.linkTo(parent.top)
                bottom.linkTo(parent.bottom)
                width = Dimension.fillToConstraints //ADD THIS
            }) {

            Text(text = "Text ", color = Yellow)
        }

        Spacer(Modifier
            .background(Color.Yellow)
            .width(2.dp)
            .fillMaxHeight()
            .constrainAs(spacer_ref) {
                end.linkTo(guide_line)
            })
    }
}