Блог

Я пытался добиться следующего макета с помощью compose:

Для этого я создал составной:

 @Preview(showBackground = true)
@Composable
fun element() {
    ConstraintLayout(
        modifier = Modifier.fillMaxWidth()
    ) {
        val (checkbox, title, icon) = createRefs()

        Text(
            text = "This would be some text",
            style = TextStyle(
                color = Color.Black,
                fontSize = 18.sp,
            ),
            modifier = Modifier.constrainAs(title) {
                top.linkTo(parent.top)
                bottom.linkTo(parent.bottom)
                start.linkTo(checkbox.end)
                end.linkTo(icon.start)
            },
        )

        Checkbox(
            checked = false,
            modifier = Modifier.constrainAs(checkbox) {
                top.linkTo(title.top)
                bottom.linkTo(title.bottom)
                start.linkTo(parent.start)
            },
            onCheckedChange = {},
        )

        Icon(
            asset = Icons.Filled.Close,
            modifier = Modifier
                .constrainAs(icon) {
                    top.linkTo(title.top)
                    bottom.linkTo(title.bottom)
                    end.linkTo(parent.end)
                }
        )
    }
}
  

Однако составляемый текст не заполняет все пространство, и пользовательский интерфейс выглядит так:

Я попытался добавить модификаторы к Text составному типу Modifier..fillMaxWidth() , но это приводит к:

Я также пытался использовать набор ограничений с горизонтальной цепочкой, но безрезультатно. Я знаю, что удаление end.linkTo(icon.start) будет выглядеть так, что это достижимо, но когда текст будет действительно длинным, он будет перекрываться значком удаления.

Чего мне здесь не хватает? Как мне добиться того же результата, что и в системе просмотра, когда мы говорим TextView , что ширина равна? 0dp

Использовать Dimension.fillToConstraints :

Измерение, которое распространяется в соответствии с ограничениями. Ссылки должны быть указаны с обеих сторон, соответствующих этому измерению, чтобы это работало.

Добавьте эту строку в свой Text модификатор:

 width = Dimension.fillToConstraints
  

Таким образом, это становится:

 Text(
    text = "This would be some text",
    style = TextStyle(
        color = Color.Black,
        fontSize = 18.sp,
    ),
    modifier = Modifier.constrainAs(title) {
        top.linkTo(parent.top)
        bottom.linkTo(parent.bottom)
        start.linkTo(checkbox.end)
        end.linkTo(icon.start)
        width = Dimension.fillToConstraints
    },
)