Fred
He estado tratando de lograr el siguiente diseño con componer:
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í:
He intentado agregar modificadores al Text
componible como Modifier..fillMaxWidth()
pero esto resulta en:
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 TextView
el 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