В Android Compose contraintLayout есть текст, который, если он длинный ->, выйдет за пределы родительского элемента.

Question

Это мой код:

      @Preview
@Composable
private fun composable(){
    ConstraintLayout(
        modifier = Modifier
            .padding(all = 8.dp)
    ) {
        val (title, type) = createRefs()

        Image(
            painter = painterResource(R.drawable.ic_chat_grey),
            contentDescription = "Badge",
            colorFilter = ColorFilter.tint(
                colorResource(
                    id =  R.color.white
                )
            ),
            modifier = Modifier
                .size(28.dp)
                .constrainAs(type) {
                    top.linkTo(parent.top)
                    end.linkTo(parent.end)
                },
        )
        Text(
            text = "123456789009876554431213TEST12312312312TEST12312312334234TEST 123456789009876554431213TEST12312312312TEST12312312334234TEST 123456789009876554431213TEST12312312312TEST12312312334234TEST",
            modifier = Modifier.constrainAs(title) {
                top.linkTo(parent.top)
                end.linkTo(type.start)
            },
            fontSize = 16.sp,
            style = TextStyle(
                fontFamily = FontFamily.SansSerif,
                fontWeight = FontWeight.Light,
                color = colorResource(
                    id = R.color.white
                )
            ),
            textAlign = TextAlign.Start
        )
    }
}

И как видите, в начале текста me присутствует не весь:

Я попытался настроить текст так, чтобы он также был связан с родительским элементом ->, но тогда он всегда равен 0.dp, даже если текст не больше экрана. (с Dimension.fillToConstraint)

Что я делаю не так?

Answer 1

Новые ограничения для изображения:

      .constrainAs(type) {
    top.linkTo(parent.top)
    start.linkTo(parent.start)
    end.linkTo(title.start)
}

Для текста:

      .constrainAs(title) {
    top.linkTo(parent.top)
    end.linkTo(parent.end)
    start.linkTo(type.end)
}

Результат:

Аргументация:

В макетах с ограничениями важно иметь ограничения с 3 или 4 сторон. Таким образом, они оба ограничены одним и тем же верхом, но теперь изображение начинается в начале родительского элемента, текст заканчивается в конце родительского элемента, и они встречаются посередине, не перекрываясь.

*обратите внимание, я также немного увеличил отступы ConstraintLayout.

Answer 2

Проблема была в ваших ограничениях. Кроме того, вам необходимо указать ширину макета родительского ограничения, он будет считать его WrapContent. Вот обновленный код.

      @Preview
@Composable
private fun composable(){
    ConstraintLayout(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .padding(all = 8.dp)
    ) {
        val (title, type) = createRefs()

        Image(
            painter = painterResource(R.drawable.ic_photo),
            contentDescription = "Badge",
            colorFilter = ColorFilter.tint(
                colorResource(
                    id =  R.color.white
                )
            ),
            modifier = Modifier
                .size(28.dp)
                .constrainAs(type) {
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)
                    width = Dimension.wrapContent
                    height = Dimension.wrapContent
                },
        )
        Text(
            text = "123456789009876554431213TEST12312312312TEST12312312334234TEST 123456789009876554431213TEST12312312312TEST12312312334234TEST 123456789009876554431213TEST12312312312TEST12312312334234TEST",
            modifier = Modifier.constrainAs(title) {
                top.linkTo(parent.top)
                start.linkTo(type.end, 16.dp)
                end.linkTo(parent.end)
                width = Dimension.fillToConstraints
            },
            fontSize = 16.sp,
            style = TextStyle(
                fontFamily = FontFamily.SansSerif,
                fontWeight = FontWeight.Light,
                color = colorResource(
                    id = R.color.white
                )
            ),
            textAlign = TextAlign.Start
        )
    }
}