ComposeでConstraintLayoutを使う時の注意点

ComposeのConstraintLayoutで制約守ってくれないじゃん！！って現象を見かけたので書きました。

ConstraintLayout {
    val (box, text) = createRefs()
    Box(modifier = Modifier
        .width(200.dp)
        .height(40.dp)
        .background(color = Color.Blue)
        .constrainAs(box) {
            start.linkTo(parent.end)
            end.linkTo(parent.start)
        }
    ) {}
    Text(
        modifier = Modifier
            .background(Color.Red)
            .constrainAs(text) {
                start.linkTo(box.start)
                end.linkTo(box.end)
                top.linkTo(box.bottom)
            },
        text = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
    )
}

こんなコードがあった時にTextのstartとendをboxのstartとendに指定しているので、
widthが200dpになると信じていた時代が僕にもありました。

これだけだと...

startとendの制約突き抜けとるじゃないですか！！！
※赤背景のstartとendを青背景のstartとendに合わせてあります。

となります。

解決方法

constraintAsにDimension.fillToConstraintsを指定する

Text(
    modifier = Modifier
        .background(Color.Red)
        .constrainAs(text) {
            start.linkTo(box.start)
            end.linkTo(box.end)
            top.linkTo(box.bottom)
            width = Dimension.fillToConstraints
        },
    text = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
)

ちなみにですが、constrainAsのwidthにDimension.fillToConstraintsを指定して、
modifierのwidthにfillMaxWidthを同時に指定した場合の動作はconstrainAsが勝ちました。
※記述の順序関係なくconstrainAsが優先されるようです。

サンプルソース

https://github.com/sobaya-0141/sample202207/pull/72