En Compose, puedes encadenar varios modificadores para cambiar el aspecto de un elemento componible. Estas cadenas de modificadores pueden afectar las restricciones que se pasan a los elementos componibles, que definen los límites de ancho y alto.
En esta página, se describe cómo los modificadores en cadena afectan las restricciones y, a su vez, la medición y la posición de los elementos componibles.
Modificadores en el árbol de IU
Para comprender cómo los modificadores se influyen entre sí, es útil visualizar cómo aparecen en el árbol de IU, que se genera durante la fase de composición. Para obtener más información, consulta la sección Composición.
En el árbol de IU, puedes visualizar los modificadores como nodos wrapper para los nodos de diseño:
Si agregas más de un modificador a un elemento componible, se crea una cadena de modificadores. Cuando encadenas varios modificadores, cada nodo modificador envuelve el resto de la cadena y el nodo de diseño. Por ejemplo, cuando encadenas un modificador clip
y un modificador size
, el nodo modificador clip
une el nodo modificador size
, que luego une el nodo de diseño Image
.
En la fase de diseño, el algoritmo que recorre el árbol se mantiene igual, pero también se visita cada nodo modificador. De esta manera, un modificador puede cambiar los requisitos de tamaño y la posición del modificador o el nodo de diseño que une.
Como se muestra en la Figura 2, la implementación de los elementos componibles Image
y Text
consiste en una cadena de modificadores que une un solo nodo de diseño. Las implementaciones de Row
y Column
simplemente son nodos de diseño que describen cómo diseñar sus elementos secundarios.
En resumen:
- Los modificadores unen un solo modificador o nodo de diseño.
- Los nodos de diseño pueden diseñar varios nodos secundarios.
En las siguientes secciones, se describe cómo usar este modelo mental para razonar sobre el encadenamiento de modificadores y cómo influye en el tamaño de los elementos componibles.
Restricciones en la fase de diseño
La fase de diseño sigue un algoritmo de tres pasos para encontrar el ancho, la altura y la coordenada x e y de cada nodo de diseño:
- Medir elementos secundarios: Los nodos miden sus elementos secundarios, si los hay.
- Decide su propio tamaño: En función de esas medidas, un nodo decide su propio tamaño.
- Colocar elementos secundarios: Cada nodo secundario se coloca en relación con la posición de un nodo.
Constraints
ayuda a encontrar los tamaños adecuados para los nodos durante los dos primeros pasos del algoritmo. Las restricciones definen los límites mínimos y máximos para el ancho y la altura de un nodo. Cuando el nodo decide su tamaño, el tamaño medido debe estar dentro de este rango.
Tipos de restricciones
Una restricción puede ser una de las siguientes opciones:
- Delimitado: El nodo tiene un ancho y una altura máximos y mínimos.
- No delimitado: El nodo no está restringido a ningún tamaño. Los límites de ancho y alto máximos se establecen como infinitos.
- Exacta: Se le solicita al nodo que siga un requisito de tamaño exacto. Los límites mínimo y máximo se configuran con el mismo valor.
- Combinación: El nodo sigue una combinación de los tipos de restricciones anteriores. Por ejemplo, una restricción podría limitar el ancho y permitir una altura máxima no delimitada, o establecer un ancho exacto, pero proporcionar una altura limitada.
En la siguiente sección, se describe cómo se pasan estas restricciones de un elemento superior a un secundario.
Cómo se pasan las restricciones de un elemento superior a uno secundario
Durante el primer paso del algoritmo descrito en Restricciones en la fase de diseño, las restricciones se pasan de elemento superior a secundario en el árbol de IU.
Cuando un nodo superior mide sus elementos secundarios, proporciona estas restricciones a cada uno de ellos para informarle qué tan grande o pequeño puede ser. Luego, cuando decide su propio tamaño, también cumple con las restricciones que pasaron sus propios elementos superiores.
En general, el algoritmo funciona de la siguiente manera:
- Para decidir el tamaño que realmente quiere ocupar, el nodo raíz del árbol de IU mide sus elementos secundarios y reenvía las mismas restricciones al primer elemento secundario.
- Si el elemento secundario es un modificador que no afecta la medición, reenvía las restricciones al siguiente modificador. Las restricciones se pasan por la cadena de modificadores tal como están, a menos que se alcance un modificador que afecte la medición. Luego, se cambia el tamaño de las restricciones según corresponda.
- Una vez que se alcanza un nodo que no tiene ningún elemento secundario (denominado “nodo de hoja”), decide su tamaño en función de las restricciones que se pasaron y muestra este tamaño resuelto a su elemento superior.
- El elemento superior adapta sus restricciones en función de las medidas de este elemento secundario y llama a su siguiente elemento secundario con estas restricciones ajustadas.
- Una vez que se miden todos los elementos secundarios de un elemento superior, el nodo superior decide su propio tamaño y se lo comunica a su propio nodo superior.
- De esta manera, se atraviesa todo el árbol priorizando la profundidad. Al final, todos los nodos decidieron sus tamaños y se completó el paso de medición.
Si deseas obtener un ejemplo detallado, consulta el video Restricciones y orden de los modificadores.
Modificadores que afectan las restricciones
En la sección anterior, aprendiste que algunos modificadores pueden afectar el tamaño de la restricción. En las siguientes secciones, se describen los modificadores específicos que afectan las restricciones.
Modificador size
El modificador size
declara el tamaño preferido del contenido.
Por ejemplo, el siguiente árbol de IU debe renderizarse en un contenedor de 300dp
por 200dp
. Las restricciones están delimitadas, lo que permite anchos entre 100dp
y 300dp
, y alturas entre 100dp
y 200dp
:
El modificador size
adapta las restricciones entrantes para que coincidan con el valor que se le pasó.
En este ejemplo, el valor es 150dp
:
Si el ancho y la altura son menores que el límite de restricción más pequeña o mayor que el límite de restricción más grande, el modificador coincidirá con las restricciones pasadas lo más posible, a la vez que cumple con las restricciones pasadas:
Ten en cuenta que encadenar varios modificadores size
no funciona. El primer modificador size
establece las restricciones mínima y máxima en un valor fijo. Incluso si el segundo modificador de tamaño solicita un tamaño más pequeño o mayor, debe cumplir con los límites exactos que se pasaron, por lo que no anulará esos valores:
Modificador requiredSize
Usa el modificador requiredSize
en lugar de size
si necesitas que tu nodo anule las restricciones entrantes. El modificador requiredSize
reemplaza las restricciones entrantes y pasa el tamaño que especificas como límites exactos.
Cuando el tamaño se vuelva a pasar al árbol, el nodo secundario se centrará en el espacio disponible:
Modificadores width
y height
El modificador size
adapta el ancho y la altura de las restricciones. Con el modificador width
, puedes establecer un ancho fijo, pero no decidir la altura.
De manera similar, con el modificador height
, puedes establecer una altura fija, pero no decidir el ancho:
Modificador sizeIn
El modificador sizeIn
te permite establecer restricciones mínimas y máximas exactas para el ancho y la altura. Usa el modificador sizeIn
si necesitas un control detallado sobre las restricciones.
Ejemplos
En esta sección, se muestra y explica el resultado de varios fragmentos de código con modificadores en cadena.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .size(50.dp) )
Este fragmento produce el siguiente resultado:
- El modificador
fillMaxSize
cambia las restricciones para establecer el ancho y la altura mínimos en el valor máximo:300dp
de ancho y200dp
de alto. - Aunque el modificador
size
desea usar un tamaño de50dp
, debe cumplir con las restricciones mínimas entrantes. Por lo tanto, el modificadorsize
también generará los límites de restricción exactos de300
por200
, ignorando efectivamente el valor proporcionado en el modificadorsize
. Image
sigue estos límites e informa un tamaño de300
por200
, que se pasa hasta el árbol.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) )
Este fragmento produce el siguiente resultado:
- El modificador
fillMaxSize
adapta las restricciones para establecer el ancho y la altura mínimos en el valor máximo:300dp
de ancho y200dp
de altura. - El modificador
wrapContentSize
restablece las restricciones mínimas. Por lo tanto, si bienfillMaxSize
dio como resultado restricciones fijas,wrapContentSize
lo restablecerá a restricciones limitadas. El siguiente nodo ahora puede volver a ocupar todo el espacio o ser más pequeño que todo el espacio. - El modificador
size
establece las restricciones en los límites mínimo y máximo de50
. Image
se resuelve en un tamaño de50
por50
, y el modificadorsize
lo reenvía.- El modificador
wrapContentSize
tiene una propiedad especial. Toma su elemento secundario y lo coloca en el centro de los límites mínimos disponibles que se le pasaron. Por lo tanto, el tamaño que comunica a sus elementos superiores es igual a los límites mínimos que se pasaron a él.
Si combinas solo tres modificadores, puedes definir un tamaño para el elemento componible y centrarlo en su elemento superior.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .clip(CircleShape) .padding(10.dp) .size(100.dp) )
Este fragmento produce el siguiente resultado:
- El modificador
clip
no cambia las restricciones.- El modificador
padding
disminuye las restricciones máximas. - El modificador
size
establece todas las restricciones en100dp
. Image
cumple con esas restricciones e informa un tamaño de100
por100dp
.- El modificador
padding
agrega10dp
en todos los tamaños, por lo que aumenta el ancho y la altura informados en20dp
. - Ahora, en la fase de dibujo, el modificador
clip
actúa en un lienzo de120
por120dp
. Por lo tanto, crea una máscara circular de ese tamaño. - Luego, el modificador
padding
inserta su contenido por10dp
en todos los tamaños, por lo que reduce el tamaño del lienzo a100
en100dp
. - El
Image
se dibuja en ese lienzo. La imagen se recorta en función del círculo original de120dp
, por lo que el resultado no es redondo.
- El modificador