Flutter Deep Dive, Parte 3: “RenderFlex children have non-zero flex…”
Continuando con la traducción parte tres! 😃
Este es la parte tres de la serie de 4. Puedes encontrar los otros aquí:
- Parte 1: “RenderFlex children…”, entrando a la piscina de bebés
- Parte 2: Dando del salto
- Parte 3: Un Flex no es un flex
- Part 4:El algoritmo del layout Flex
Entonces, ¿Estas listo para regresar al tema? Si, yo Tampoco… pero de cualquier forma, aquí vamos.
El Flex
Un Flex es flexible en el sentido de que puede ajustar su tamaño en función de sus hijos. Pero no confundas el hecho de que puede ser flexible con un Flexible real porque es un Widget diferente y tendrás problemas si los confundes.
Así que no confunda el Flexy el Flexible, o el hecho de que un Flexible tiene un flex(que no es lo mismo que un Flex), y queremos recordar que la forma en que se aplica el flexdepende del FlexFit.
Consejo rapido: Un Flexpuede tener cualquier número de Flexiblespero un Flexiblesólo puede tener un flex. Y recuerde, un Flex no es un flex. ¿Entendiste eso?
De acuerdo, seré amable. No más bromas por un tiempo.
El Flexes el Widget que extienden Row yColumn. Son los únicos dos widgets de Flutter que extienden Flex(a partir de Flutter 1.0). Puede utilizar un Flexdirectamente en lugar de Row/Column y establecer la propiedad AxisDirectionen arriba, abajo, izquierda o derecha; pero eso probablemente confundiría a la gente, así que tal vez debería limitarse a utilizar Row/Column.
Quieres asegurarte de recordar que cuando hay algo mal en tu Row o Column, el error no va a decir nada sobre una Row o Column. De hecho, ni siquiera dice nada sobre un Flex.
Que entre el RenderFlex
¿Recuerdas que hablamos de las tres capas de una pastel de Flutter? Las capas Widget, Element y Render? Es necesario entender el concepto básico de esas capas para entender por qué el error dice “RenderFlex children…”. Esto se debe a que el error no se produce en la capa Widget, sino en la capa de renderizado, y la capa de renderizado no tiene Rows ni Column. Tiene el RenderFlex.
Lo que sucede es que cuando usas una Rows ni Column en la capa Widget, se renderiza como un RenderFlex en la capa Render.
Recuerde, una Row o Column es sólo un Flex con ciertos valores ya codificados. Por lo tanto, la capa de renderizado sólo utiliza un Flex, y luego ajusta los parámetros a lo que sea necesario para crear la Row o Column que desee. Como dijimos antes, se puede usar un Flex en lugar de una Row o Column, pero dijimos que eso confundiría a la gente.
Pero la capa Render usa un Flex, y por eso el error dice RenderFlex y no Row, Column o RenderFlex.
(No hay RenderColumn, lo inventé.)
Flexible y FlexFit
Flexible y FlexFit son un conjunto a juego. Hay una subclase de Flexible con la que probablemente ya esté familiarizado, la Expanded. Nos ocuparemos de eso en un momento, pero por ahora, echemos un vistazo a los Flexibles y sus ajustes.
La idea de un Flexible es que le da una forma de redimensionar un Widget. Puede hacer que su hijo sea más grande o más pequeño y puede ser una gran manera de cambiar el tamaño de una imagen, entre otras cosas.
Consejo rápido para cambiar el tamaño de la imagen:
Si el hijo de un Flexible es demasiado grande para caber dentro del padre del Flexible, entonces el hijo será redimensionado para que quepa. Esto es importante porque es una manera fácil de tratar con una imagen que es demasiado grande y que causa un error de desbordamiento (las barras negras y amarillas). Sólo tiene que rellenar la imagen en un Expanded y ponerlo en una Row o Column. ¡Voilà! Se redimensionará automáticamente para que quepa en cualquier espacio disponible, en tiempo de ejecución, y sin necesidad de escribir un montón de código para hacerlo.
El ajuste…. Mi esposa dice que todo se trata de los zapatos.
Esto puede parecer una broma, pero no lo es. Ella realmente dice que todo se trata de los zapatos.
Pero volvamos a los negocios…
La manera más fácil de entender rápidamente el fit es si usted se imagina un globo dentro de una caja de zapatos. El Flexible es el globo y su Flex padre ( Column/Row) es la caja.
Si soplas el globo tanto como puedas mientras está dentro de la caja de zapatos, ¿cómo encaja el globo en la caja de zapatos? ¿Apretado o suelto?
Ahora entiendes lo que es estar fit. Sí, es así de simple.
FlexFit.tight no sólo va a crecer suavemente hasta que toque suavemente los bordes. Va a empujar para ver si puede hacer que su padre le dé más espacio… y empujará con fuerza (a lo largo del eje principal) hasta que el padre ( Row/Column) empiece a imponer algunos límites y diga: “No más”. Eso es todo lo que obtienes”.
Esto es lo gracioso. Nuestro Flex(normalmente un Expanded), va a tener un hijo. Por lo tanto, se preguntarán cómo se calcula el tamaño del hijo en todo esto.
Respuesta: No lo hace.
Puede ajustar el parámetro de altura o ancho del hijo a 1.0 o 100000.0; si el parámetro de tamaño está a lo largo del eje principal, entonces no importa porque va a ser ignorado. Esto se debe a que un Flex con FlexFit.tight (también conocido como Expanded) sólo se preocupa por las limitaciones que su padre está poniendo a su tamaño, no por lo que su hijo quiere.
Esto se encarga de FlexFit.tight, pero ¿qué pasa con FlexFit.loose?
El problema se Expande…
Mira este constructor:
Mira el tercer parámetro de la llamada a super(). El ajuste se ha codificado en FlexFit.tight y no se puede cambiar. Cuando empiezas a recibir errores de RenderFlex que involucran a un Expanded, eso suele ser la mitad del problema. De esto es de lo que habla el error cuando dice “RenderFlex children have non-zero flex”.
Lo siguiente que hay que entender es cómo el algoritmo de diseño maneja múltiples hijos dentro de un solo padre. Así es como se maneja el diseño de un Flex.
A continuación, Parte 4: El temido algoritmo de Flex Layout….
Gracias a Nash y Nawal Alhamwi.
Puedes seguir al autor en Twitter:
Y al traductor en:
