Android Compose ConstraintLayout 問題

Question

撰寫版本： 1.0.0-beta04 。

constraintlayout-compose 版本： 1.0.0-alpha05 。

可組合：

@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)
                })
        }
    }

}

預習：

如您所見，這些項目並沒有像預期的那樣受到限制。 view_based ConstraintLayout中的視圖不會在屏幕之外繪制，除非約束被弄亂或者是故意的。

Answer 1

在可組合Box刪除fillMaxSize()修飾符並應用約束width = Dimension.fillToConstraints 。

就像是：

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)
            })
    }
}