Equivalente de diseño de restricción 0dp

2 minutos de lectura

Avatar de usuario de Fred
Fred

He estado tratando de lograr el siguiente diseño con componer:

ingrese la descripción de la imagen aquí

Para esto, he creado el componible:

@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)
                }
        )
    }
}

Sin embargo, el texto componible no llena todo el espacio y la interfaz de usuario se ve así:
ingrese la descripción de la imagen aquí

He intentado agregar modificadores al Text componible como Modifier..fillMaxWidth()pero esto resulta en:

ingrese la descripción de la imagen aquí

También intenté usar un conjunto de restricciones con una cadena horizontal, pero fue en vano. yo se que quitando end.linkTo(icon.start) parecería que esto se puede lograr, pero cuando el texto fuera muy largo, se superpondría con el ícono de eliminar.

¿Que me estoy perdiendo aqui? ¿Cómo logro el mismo resultado que en el sistema de vista cuando decimos el TextViewel ancho es 0dp?

Usar Dimension.fillToConstraints:

Una dimensión que se extiende para coincidir con las restricciones. Los enlaces deben especificarse desde ambos lados correspondientes a esta dimensión, para que esto funcione.

Agregue esta línea a su Text modificador:

width = Dimension.fillToConstraints

Entonces se convierte en:

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
    },
)

  • ¡Muy lindo! Una pregunta de seguimiento, ¿tienes un enlace donde se explica esto? ¡gracias!

    – Fred

    12 oct 2020 a las 13:53

  • está ahí en un componer codelab en la sección “Personalizar dimensiones”

    – Saurabh Thorat

    12 oct 2020 a las 14:30

  • necesitas la dependencia implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-rc02" ver desarrollador.android.com/jetpack/compose/layouts/…

    – linaje

    27 de diciembre de 2021 a las 18:29

  • @SaurabhThorat, ¿hay alguna forma de agregar una doble condición, por ejemplo: ancho = Dimension.fillToConstraints cuando el texto es pequeño y ancho = Dimension.wrapContent cuando el texto es grande?

    – Skizo-ozᴉʞS ツ

    16 de marzo de 2022 a las 12:49

  • esto no funciona ahora

    – Talha Akbar

    24 de mayo de 2022 a las 11:08

¿Ha sido útil esta solución?