Compose 的 ConstraintLayout 约束问题

Question

Compose 的 ConstraintLayout 约束问题

代码如下

@Preview(showBackground = true)
@Composable
fun ToolBarWidget(
    @PreviewParameter(ToolBarParamsMock::class) params: ToolBarParams
) {
    ConstraintLayout(
        modifier = Modifier
            .fillMaxWidth()
            .height(45.dp)
    ) {

        val (leftIcon, title, rightText, rightIcon) = createRefs()

        Image(
            painter = painterResource(id = R.drawable.icon_arrow_left),
            contentDescription = "backIcon",
            modifier = Modifier
                .constrainAs(leftIcon) {
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                }
                .padding(16.dp, 0.dp, 0.dp, 0.dp)
                .clickable {
                    params.backClick?.invoke()
                },
            alignment = Alignment.Center
        )

        Text(
            params.titleText,
            textAlign = TextAlign.Center,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier
                .fillMaxWidth(1f)
                .constrainAs(title) {
                    linkTo(
                        start = parent.start, startMargin = 48.dp,
                        end = parent.end, endMargin = 45.dp,
                        top = parent.top, topMargin = 0.dp,
                        bottom = parent.bottom, bottomMargin = 0.dp
                    )
                }


        )

        params.rightText?.let {
            Text(
                it,
                textAlign = TextAlign.Center,
                modifier = Modifier.constrainAs(rightText) {
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                }
            )
        }

        params.rightIcon?.let {
            Image(
                painter = painterResource(id = it),
                contentDescription = "rightIcon",
                modifier = Modifier
                    .constrainAs(rightIcon) {
                        top.linkTo(parent.top)
                        bottom.linkTo(parent.bottom)
                    }
                    .padding(16.dp, 0.dp, 0.dp, 0.dp),
            )
        }
    }
}

data class ToolBarParams(
    val titleText: String,
    val rightText: String?,
    val rightIcon: Int?,
    val backClick: (() -> Unit)?
)

class ToolBarParamsMock : PreviewParameterProvider<ToolBarParams> {
    override val values: Sequence<ToolBarParams>
        get() = listOf<ToolBarParams>(
            ToolBarParams("标题", "右标题", null, null),
            ToolBarParams(
                "标题".repeat(40),
                null,
                R.drawable.icon_arrow_left,
                null
            ),
            ToolBarParams("标题", null, null, null)
        ).asSequence()
}

预览结果如下

我的疑问

为什么标题的视图的宽度不是margin start 和 margin end 约束下的大小，居然可以撑大到parent。我希望是撑大到约束。
我进行了

        Text(
            params.titleText,
            textAlign = TextAlign.Center,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier
                .constrainAs(title) {
                    linkTo(
                        start = parent.start, startMargin = 48.dp,
                        end = parent.end, endMargin = 45.dp,
                        top = parent.top, topMargin = 0.dp,
                        bottom = parent.bottom, bottomMargin = 0.dp
                    )
                }
        )

在android xml 中我们可以设置宽度为0dp实现效果
尝试也不行