Compose ConstraintLayout 不尊重约束

Question

我正在尝试使用约束布局来放置我的元素，但当该元素的内容大于可用空间时，它们并没有真正尊重我给它们的约束。

这是我真正的限制还是我只是出于错误的目的使用此布局？

约束布局中的两个元素

我尝试过不同的版本，但大多数看起来像这样：

@Composable
fun ConstrainedElements() {
    ConstraintLayout(modifier = Modifier.padding(WindowInsets.safeDrawing.asPaddingValues())) {

        val (button, title) = createRefs()

        RegularButton(text = "Play", modifier = Modifier.constrainAs(button) {
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
            start.linkTo(parent.start)
        })

        Title(
            title = "Title too long that should be wrapped always",
            modifier = Modifier.constrainAs(title) {
                top.linkTo(parent.top)
                bottom.linkTo(parent.bottom)
                start.linkTo(button.end)
                end.linkTo(parent.end)
            })
    }
}

@Composable
fun RegularButton(modifier: Modifier = Modifier, text: String) {
    Button(modifier = modifier, onClick = { /*TODO*/ }) {
        Text(text = text)
    }
}

@Composable
fun Title(modifier: Modifier = Modifier, title: String) {
    Text(
        text = title,
        fontSize = 18.sp,
        fontWeight = FontWeight.Bold,
        textAlign = TextAlign.Justify,
        overflow = TextOverflow.Ellipsis,
        modifier = modifier
    )
}

Answer 1

要解决标题文本太长且无法正确换行的问题，您可以修改标题可组合项以确保它尊重可用空间。具体来说：

使用maxLines和overflow = TextOverflow.Ellipsis：这可以确保如果文本超出可用空间，它将被截断并显示省略号（...）。 调整标题修改器以使用 fillMaxWidth：这可确保文本占用剩余空间，尊重布局的约束。

@Composable
fun ConstrainedElements() {
    ConstraintLayout(modifier = Modifier.padding(WindowInsets.safeDrawing.asPaddingValues())) {

        val (button, title) = createRefs()

        RegularButton(text = "Play", modifier = Modifier.constrainAs(button) {
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
            start.linkTo(parent.start)
        })

        Title(
            title = "Title too long that should be wrapped always",
            modifier = Modifier
                .constrainAs(title) {
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                    start.linkTo(button.end)
                    end.linkTo(parent.end)
                    width = Dimension.fillToConstraints
                }
                .padding(start = 8.dp) // Padding between button and title
        )
    }
}

@Composable
fun RegularButton(modifier: Modifier = Modifier, text: String) {
    Button(modifier = modifier, onClick = { /*TODO*/ }) {
        Text(text = text)
    }
}

@Composable
fun Title(modifier: Modifier = Modifier, title: String) {
    Text(
        text = title,
        fontSize = 18.sp,
        fontWeight = FontWeight.Bold,
        maxLines = 1, // Limit to 1 line to prevent overflow
        overflow = TextOverflow.Ellipsis, // Truncate with ellipsis if too long
        modifier = modifier
    )
}

解释：

maxLines = 1：确保文本不超过一行，防止溢出。

TextOverflow.Ellipsis：如果文本超出可用空间，则在文本中添加省略号 (...)。

Dimension.fillToConstraints：确保文本填充按钮和父级末尾之间的空间。