Jetpack Compose: el orden de los modificadores es importante | por Saqib | julio 2023

¿Cómo afecta el orden de los modificadores al resultado?

Para entender, necesitamos ver Under The Hood cómo Compose UI se construye a partir de funciones Composable. Compose transforma los datos en UI en tres etapas, como se muestra a continuación

• composición –Qué show?: Compose Runtime itera a través de funciones componibles, ve lo que debe mostrarse y crea una estructura de árbol que representa la interfaz de usuario. Cada nodo de este árbol es un nodo de diseño que contiene información para la siguiente fase del proceso.
• Disposición – Dónde show?: esta fase toma la estructura de árbol como entrada, itera a través de ella, atravesando cada nodo y sus hijos, y midiendo el ancho, la altura y las coordenadas x/y de sus hijos y finalmente su propio nodo en el espacio 2D.
• dibujo – Cómo render?: Recorre el árbol nodo por nodo, dibujando cada nodo píxel por píxel en la pantalla 2D.

Fuente de la imagen: Video en Jetpack Compose Phases

Etapas de maquetación y dibujo.

La fase de diseño determina la ubicación, el tamaño, el ancho y la altura de x&y de cada diseño y sus elementos secundarios utilizando modificadores y restricciones. La fase de dibujo dibuja el diseño y aplica los modificadores que deben aplicarse en la fase de dibujo. Algunos de los modificadores afectan la fase de dibujo, como B. Modificadores de borde y recorte, que están relacionados con el dibujo y se aplican solo en la fase de dibujo de la composición. Estos modificadores se aplican de derecha a izquierda en la cadena de modificadores. Asimismo, algunos modificadores afectan la fase de diseño. En general, todos los modificadores que pueden afectar el tamaño y la ubicación de los elementos de la interfaz de usuario se aplican en la etapa de diseño, como: Por ejemplo, size , padding , fillMaxSize , sizeIn , wrapContentSize , requireSize , etc. Estos modificadores se aplican de izquierda a derecha en la cadena de modificadores. Para comprender el panorama general de cómo se aplican los modificadores juntos, veremos estas dos etapas juntas. Antes de continuar, un punto más que debemos tener en cuenta que en la fase de diseño, las restricciones y los modificadores se aplican juntos para decidir el tamaño final y la ubicación de cada elemento de la interfaz de usuario. Por ejemplo, en la fase de diseño, cada nodo pasa sus restricciones a sus nodos secundarios y los restringe para que no excedan los límites de esas restricciones. Luego, los nodos secundarios deciden su tamaño dentro de esas restricciones y propagan las restricciones actualizadas a sus hijos, etc. y, finalmente, el nodo principal decide su tamaño y ubicación una vez que se configuran todos sus hijos. Ahora veamos cómo se aplican los modificadores a través de un gráfico. Usaremos el ejemplo de código que se muestra en el primer ejemplo anterior. El siguiente diagrama muestra cómo se aplican los modificadores.En el diagrama, cada flecha está etiquetada con el número 1, 2, 3, etc., indicando el orden de los modificadores aplicados. Fase de diseño: representada por flechas superiores que van de izquierda a derecha. Fase de dibujo: Representada por flechas inferiores que van de derecha a izquierda. Como se mencionó anteriormente, los modificadores que afectan el tamaño y la ubicación del elemento de la interfaz de usuario se aplican de izquierda a derecha, que se mencionan en el diagrama con las flechas superiores que van de izquierda a derecha y numeradas 1, 2 y 3, porque estos modificadores afectan el tamaño y la ubicación, las flechas inferiores 4 y 6 muestran los modificadores que se aplican durante la fase de dibujo, por lo que se aplican de derecha a izquierda, con las flechas inferiores de derecha a izquierda. Cada flecha superior en la fase de diseño, etiquetada como 1, 2 y 3, tiene restricciones que pasan de izquierda a derecha, y el siguiente modificador no excede las restricciones proporcionadas por el modificador anterior. En cada paso, las restricciones se actualizan en función de los modificadores y, a continuación, las restricciones actualizadas se propagan a los siguientes modificadores, y así sucesivamente. Veamos el diagrama del segundo ejemplo de código.En el ejemplo, intercambiamos el modificador de relleno y el modificador de borde, por lo que esto afecta la forma en que se aplican los modificadores y, en última instancia, el resultado de la interfaz de usuario. En el siguiente ejemplo, intercambiamos los modificadores de relleno y tamaño como se muestra a continuación. Veamos cómo se dibuja la interfaz de usuario.Podemos ver que el tamaño final del cuadro se establece en 40 dp y el tamaño del cuadro verde interior ahora se reduce a 20 dp debido a un relleno de 10 dp aplicado a ambos lados después del modificador de tamaño.