En Compose, puedes encadenar varios modificadores para cambiar el aspecto y 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 encadenados afectan las restricciones y, a su vez, los medición y posición de elementos componibles.
Modificadores en el árbol de IU
Para comprender cómo los modificadores se influencian entre sí, es útil visualizar cómo aparecen en el árbol de IU, que se genera durante la fase de composición. Para Para obtener más información, consulta la sección Composición.
En el árbol de IU, puedes visualizar los modificadores como nodos wrappers para el diseño. nodos:
![Código para elementos componibles y modificadores, y su representación visual como un árbol de IU](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/modifier-wrapping.png?authuser=5&hl=es)
Si agregas más de un modificador a un elemento componible, se crea una cadena de modificadores. Cuándo
encadenas múltiples modificadores, cada nodo modificador envuelve el resto de la cadena.
y el nodo de diseño en. Por ejemplo, cuando encadenas un 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 sigue siendo el mismo, pero también se visita cada nodo modificador. De esta manera, un modificador puede cambiar el tamaño y la ubicación del modificador o nodo de diseño que une.
Como se muestra en la Figura 2, la implementación de los elementos componibles Image
y Text
consisten en una cadena de modificadores que unen un solo nodo de diseño. El
implementaciones de Row
y Column
son simplemente nodos de diseño que describen cómo
para diseñar a sus hijos.
![La estructura de árbol de antes, pero ahora cada nodo es solo un diseño simple, con muchos modificadores que unen los nodos a su alrededor.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/composables-modifiers.png?authuser=5&hl=es)
En resumen:
- Los modificadores unen un solo modificador o nodo de diseño.
- Los nodos de diseño pueden distribuir varios nodos secundarios.
Las siguientes secciones describen cómo usar este modelo mental para razonar sobre 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 cada diseño. ancho, alto y coordenada x, y:
- Medir elementos secundarios: Un nodo mide sus elementos secundarios, si los hay.
- Decide tu propio tamaño: En función de esas mediciones, un nodo decide por su cuenta. de tamaño del ensamble.
- Ubicación secundaria: Cada nodo secundario se coloca en relación con el nodo posición.
Constraints
ayuda a encontrar los tamaños correctos para los nodos durante los primeros dos.
pasos del algoritmo. Las restricciones definen los límites mínimos y máximos para un
el ancho y la altura del nodo. Cuando el nodo decide su tamaño, su tamaño medido
debe estar dentro de este rango de tamaño.
Tipos de restricciones
Una restricción puede ser una de las siguientes:
- Delimitado: El nodo tiene un ancho y una altura máximos y mínimos.
![Restricciones delimitadas de diferentes tamaños dentro de un contenedor](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/bounded-constraints.png?authuser=5&hl=es)
- No delimitado: El nodo no está restringido a ningún tamaño. El ancho máximo y los límites de altura están establecidos en infinito.
![Restricciones no delimitadas que tienen el ancho y la altura establecidos en infinito Las restricciones se extienden más allá del contenedor.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/unbounded-constraints.png?authuser=5&hl=es)
- Exacta: Se le pide al nodo que cumpla con un requisito de tamaño exacto. El mínimo y los límites máximos se establecen en el mismo valor.
![Restricciones exactas que se ajustan a un requisito de tamaño exacto dentro del contenedor](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/exact-constraints.png?authuser=5&hl=es)
- 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, al mismo tiempo, permitir altura máxima no delimitada o establecer un ancho exacto, pero proporciona una altura delimitada.
![Dos contenedores que muestran combinaciones de restricciones delimitadas y no delimitadas, y anchos y alturas exactos.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/combination-constraints.png?authuser=5&hl=es)
En la siguiente sección, se describe cómo se pasan estas restricciones de un elemento superior a un hijo o hija.
Cómo se pasan las restricciones de elementos superiores a secundarios
Durante el primer paso del algoritmo descrito en Restricciones en el diseño , las restricciones se pasan de un elemento superior a otro secundario en el árbol de IU.
Cuando un nodo superior mide sus elementos secundarios, proporciona estas restricciones a cada uno un niño para decirles qué tan grandes o pequeños pueden ser. Luego, cuando decide su propio tamaño, también se adhiere a las restricciones que pasaron por de sus propios padres.
En términos generales, el algoritmo funciona de la siguiente manera:
- Para decidir el tamaño que realmente quiere ocupar, el nodo raíz en el árbol de IU mide sus elementos secundarios y reenvía las mismas restricciones a su primer elemento secundario.
- Si el elemento secundario es un modificador que no afecta la medición, reenvía restricciones al siguiente modificador. Las restricciones se pasan por el modificador sin modificar, a menos que se alcance un modificador que afecte la medición. El las restricciones se redimensionan en consecuencia.
- Una vez que se llega a un nodo que no tiene ningún elemento secundario (denominado "hoja" nodo), decide su tamaño en función de las restricciones que se pasaron devuelve este tamaño resuelto a su elemento superior.
- El elemento superior adapta sus restricciones en función de las medidas de este elemento secundario. llama a su próximo elemento secundario con estas restricciones ajustadas.
- Una vez que se miden todos los elementos secundarios de un elemento superior, el nodo superior decide qué y se lo comunica a su elemento superior.
- De esta manera, todo el árbol se recorre primero en profundidad. Eventualmente, todos los nodos decidiste sus tamaños y completa el paso de medición.
Para obtener un ejemplo detallado, consulta Restricciones y orden de los modificadores. video.
Modificadores que afectan las restricciones
En la sección anterior, aprendiste que algunos modificadores pueden afectar la restricción de tamaño del ensamble. En las siguientes secciones, se describen los modificadores específicos que afectan 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
:
![Una parte de un árbol de IU con el modificador de tamaño que une un nodo de diseño
de las restricciones delimitadas establecidas por el modificador de tamaño en un contenedor.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier.png?authuser=5&hl=es)
El modificador size
adapta las restricciones entrantes para que coincidan con el valor que se le pasa.
En este ejemplo, el valor es 150dp
:
![Igual que en la Figura 7, excepto por el modificador de tamaño que adapta las restricciones entrantes para que coincidan con el valor que se le pasa.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier-2.png?authuser=5&hl=es)
size
que ajusta las restricciones a 150dp
Si el ancho y la altura son menores que el límite de restricción más pequeño. mayor que el límite de restricción más grande, el modificador coincide con el restricciones de la manera más precisa posible, a la vez que respeta las restricciones que se pasaron en:
![Dos árboles de IU y sus representaciones correspondientes en contenedores En el primero, el
El modificador de tamaño acepta las restricciones de inclusión; Segundo, el modificador de tamaño se adapta a la
demasiado grandes, lo que genera restricciones que llenan el contenedor.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier-3.png?authuser=5&hl=es)
size
que cumple con la restricción que se pasó
como sea posible.Ten en cuenta que encadenar varios modificadores size
no funciona. Los primeros size
el modificador establece las restricciones mínima y máxima en un valor fijo. Incluso si
el segundo modificador de tamaño solicita un tamaño menor o mayor,
cumplir con los límites exactos pasados, por lo que no anulará esos valores:
![Una cadena de dos modificadores de tamaño en el árbol de IU y su representación en un contenedor
que es el resultado del primer valor que se pasa y no el segundo.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier-4.png?authuser=5&hl=es)
size
, en la que se pasa el segundo valor
en (50dp
) no anula el primer valor (100dp
).Modificador requiredSize
Usa el modificador requiredSize
en lugar de size
si necesitas
para anular 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 vuelve a pasar al árbol, el nodo secundario se centra en la espacio disponible:
![El tamaño y el modificador requiredSize encadenados en un árbol de IU, y el modificador
la representación en un contenedor. Las restricciones del modificador requiredSize anulan el modificador de tamaño
restricciones.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/requiredsize-modifier.png?authuser=5&hl=es)
requiredSize
anula las restricciones entrantes de
el modificador size
.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 definir la altura.
De manera similar, con el modificador height
, puedes establecer una altura fija, pero dejar
ancho indeciso:
![Dos árboles de IU, uno con el modificador de ancho y su representación del contenedor, y el otro
con el modificador de altura y su representación.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/width-height-modifier.png?authuser=5&hl=es)
width
y height
establecen un ancho fijo
y altura, respectivamente.Modificador sizeIn
El modificador sizeIn
te permite establecer restricciones mínimas y máximas exactas
para el ancho y alto. Usa el modificador sizeIn
si necesitas un control detallado
sobre las restricciones.
![Un árbol de IU con el modificador sizeIn con los anchos y las alturas mínimos y máximos establecidos.
y su representación en un contenedor.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/sizein-modifier.png?authuser=5&hl=es)
sizeIn
con minWidth
, maxWidth
, minHeight
y
Se estableció maxHeight
.Ejemplos
En esta sección, se muestra y se explica el resultado de varios fragmentos de código con encadenados.
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 ancho y altura mínimos al valor máximo:300dp
de ancho y200dp
de altura. - Aunque el modificador
size
quiere usar un tamaño de50dp
, aún necesita para cumplir con las restricciones mínimas entrantes. Por lo tanto, el modificadorsize
también muestra los límites de restricción exactos de300
por200
, ignora el valor proporcionado en el modificadorsize
. Image
sigue estos límites e informa un tamaño de300
por200
, que se pasa por todo 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 ancho y alto al valor máximo:300dp
pulgadas y200dp
pulgadas altura. - El modificador
wrapContentSize
restablece las restricciones mínimas. Entonces, si bienfillMaxSize
generó restricciones corregidas,wrapContentSize
lo restablece. debido a limitaciones delimitadas. El siguiente nodo ahora puede ocupar todo el espacio o ser más pequeña 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 secundario y lo coloca en el centro de los límites mínimos disponibles que se que se le pasa. El tamaño que comunica a sus elementos superiores es entonces igual al límites mínimos que se pasaron dentro de ella.
Si combinas solo tres modificadores, puedes definir un tamaño para el elemento componible céntrela 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
reduce las restricciones máximas. - El modificador
size
establece todas las restricciones en100dp
. - El elemento
Image
cumple con esas restricciones e informa un tamaño de100
100dp
- El modificador
padding
agrega10dp
en todos los tamaños, por lo que aumenta la cantidad informada ancho y alto por20dp
. - Ahora, en la fase de dibujo, el modificador
clip
actúa sobre un lienzo de120
al120dp
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 según el círculo original de120dp
, por lo que el resultado no es redondo.
- El modificador