flex - significado - contenedores de basura colores

La mejor forma de clasificar contenedores en Flex para obedecer SÓLO las dimensiones explícitas de los contenedores principales

Question

He estado teniendo este problema con Flex durante casi un año, y cada vez creo una solución rápida de hack que funciona por el momento. Me gustaría ver si alguien tiene una mejor idea.

Aquí están las condiciones de un problema:

|------Container  ------------|
|  explicitHeight:  400 (or whatever)
|                             |
|  |-------- VBox  -------|   |
|  |  percentHeight: 100  |   | 
|  |                      |   |
|  |  |-Repeater------|   |   |
|  |  | Potentially   |   |   |
|  |  | a lot of stuff.   |   |
|--|--|---------------|---|---|

El problema es que, al contrario de lo que me gustaría, el VBox SIEMPRE se expandirá para acomodar el contenido que contiene, en lugar de ajustarse a la altura explícita de su elemento principal y crear una barra de desplazamiento.

Mi solución ha sido el código en una referencia al padre (o, en la medida de lo posible, ir a la lista de visualización para encontrar un valor explícitamente establecido en lugar de un porcentaje).

Incluso he considerado usar esto en una clase de utilidad:

public static function getFirstExplicitHeightInDisplayList(comp:UIComponent):Number{
    if (!isNaN(comp.explicitHeight)) return comp.explicitHeight;
    if (comp.parent is UIComponent) return    
         getFirstExplicitHeightInDisplayList(UIComponent(comp.parent));
    else return 0;
}

Por favor dime que hay una mejor manera.

Answer 1

Tienes que usar el parámetro "autoLayout" en el VBox como dice la documentación:

"De forma predeterminada, el tamaño del contenedor VBox es lo suficientemente grande como para mantener la imagen en su tamaño original. Si desactiva las actualizaciones de diseño, y usa el efecto Zoom para agrandar la imagen, o usa el efecto Mover para reposicionar la imagen, la imagen podría extenderse más allá de los límites del contenedor VBox.

Establece la propiedad autoLayout en false, por lo que el contenedor VBox no cambia de tamaño a medida que cambia el tamaño de la imagen. Si la imagen crece a un tamaño tal que se extiende más allá de los límites del contenedor VBox, el contenedor agrega barras de desplazamiento y recorta la imagen en sus límites.

Espero que eso te ayude.

Answer 2

Establezca las propiedades de su contenedor:

clipContent = true;
verticalScrollPolicy = "off"

Entonces su VBox debería recortar automáticamente cuando tiene percentHeight = 100 ;

Funciona para mí en Flex 3.

Si necesitas ser realmente elegante, puedes configurar scrollRect en objetos:

scrollRect = new Rectangle(x, y, w, h);

dependiendo de lo que necesites hacer.

Answer 3

establecer minHeight = 0 es todo lo que necesita hacer.

Esto le dice a la VBox que ignore las medidas de los niños cuando se dimensiona a sí misma, y ​​en su lugar calcula su altura en función de sus propias restricciones / de sus padres. Configura todo lo demás como lo harías normalmente, desplazándote y todo lo demás funcionará perfectamente.

Pasé DAYS en este año hace un año; no es intuitivo, probablemente podrían haber nombrado mejor la propiedad. Espero que esto les ahorre algo de tiempo ...

Answer 4

AutoLayout = false parece evitar que se vuelva a ejecutar el diseño cuando cambia el tamaño de los niños. Sin embargo, si agrega o quita elementos secundarios, el diseño volverá a ejecutarse de todos modos.

Si se configura minHeight = 0, se desconecta completamente el tamaño (externo) de la VBox del tamaño y número de hijos, que es lo que yo quería.

Mientras revisaba el código fuente de Flex, no vi el mecanismo mediante el cual la configuración minHeight = 0 lo hacía funcionar como quería, así que saludo a Yarin por haberlo descubierto. ¡Gracias!

Answer 5

De hecho, Yarin Kessler nos trajo la única respuesta correcta aquí (lamentablemente, no tengo los derechos para comentar su publicación, es por eso que lo estoy haciendo aquí).

Cuando su tamaño HBox se basa en un valor porcentual, espera que solo su contenedor influya en su tamaño. Eso está mal, hay otra regla, una más fuerte. Es el hecho de que un contenedor (que es HBox) tiene un tamaño mínimo, que es la suma de los tamaños predeterminados / explícitos de sus propios componentes secundarios.

Entonces, si el valor de su porcentaje resulta en un valor menor que el tamaño mínimo, el tamaño mínimo gana y se aplica al HBox. Como HBox muestra todos sus elementos secundarios, no hay necesidad de barras de desplazamiento.

Entonces usando:

minHeight = 0;
minWidth = 0;

es como decirle al HBox que su tamaño mínimo es 0 en lugar de sus tamaños predeterminados para niños. Lo estás redefiniendo y de esa manera el tamaño mínimo es menor que el valor porcentual y pierdes la batalla.

La única frase que encontré en la documentación de Adobe que explica esto es esta:

Un tamaño de contenedor basado en porcentaje es consultivo. Flex hace que el contenedor sea lo suficientemente grande como para que se ajuste a sus niños en sus tamaños mínimos.

Espero haber sido claro,

(no dude en corregir mis oraciones inglesas incorrectas ...)