flex - div - scroll horizontal

Adobe Flex/AIR: desplazamiento de un subcomponente, no de toda la ventana

Question

Estoy desarrollando una aplicación con Adobe Flex y AIR, y he estado golpeando mi cabeza contra la pared tratando de encontrar la manera de resolver un problema de desplazamiento.

La estructura básica de la ventana principal de mi aplicación (simplificada en gran medida) es esta:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
   paddingTop="0" paddingRight="0" paddingBottom="0" paddingLeft="0"
   width="800" height="600" layout="vertical" verticalAlign="top" 
>
   <mx:VBox id="MainContainer" width="100%" height="100%">
      <mx:Panel id="Toolbars" width="100%" height="25" />
      <mx:HDividedBox width="100%" height="100%" >
         <mx:Panel id="Navigation" minWidth="200" height="100%" />
         <mx:VBox id="MainContent" width="100%">
            <mx:Panel width="100%" height="200" />
            <mx:Panel width="100%" height="200" />
            <mx:Panel width="100%" height="200" />
            <mx:Panel width="100%" height="200" />
            <mx:Panel width="100%" height="200" />
         </mx:VBox>
         <mx:Panel id="HelpContent" minWidth="200" height="100%" />
      </mx:HDividedBox>
      <mx:Panel id="FooterContent" width="100%" height="25" />
   </mx:VBox>
</mx:WindowedApplication>

El problema es que el cuadro "Contenido principal" podría contener una gran lista de subcomponentes, y la presencia de esa lista larga hace que una barra de desplazamiento vertical aparezca en el nivel más alto de la GUI, rodeando el vbox "MainContainer".

Se ve muy tonto, con barras de desplazamiento alrededor de toda la ventana de la aplicación.

Lo que estoy buscando en su lugar es una solución donde la barra de desplazamiento solo se aplica a la vbox "MainContent" (así como a los paneles Navigation y HelpContent, si su contenido se extiende más allá de los límites de la ventana).

Encontré una pregunta relacionada en StackOverflow, donde la solución del problema era usar los atributos "autoLayout" y "verticalScrollPolicy" en los contenedores principales.

Así que traté de agregar los atributos autoLayout = "false" y verticalScrollPolicy = "off" a todos los contenedores principales, así como verticalesScrollPolicy = "on" a la vbox "MainContent". Pero el resultado final de ese experimento fue que el contenido simplemente se recortó del contenedor principal (y se agregó una barra de desplazamiento inútil sin pulgar a la vbox de MainContent).

¿Alguien sabe como resolver esto?

Answer 1

Encontré una solución.

Parece que la única forma de evitar que el VBox amplíe agresivamente su espacio vertical (y forzando a sus padres a que crezcan las barras de desplazamiento) es envolver el VBox en un lienzo.

Aquí hay un pequeño componente útil, llamado ScrollableVBox, que realiza la solución mientras se ocupan de algunos problemas de bookkeping (como agregar y quitar hijos al VBox, pasándolos alrededor del contenedor de Cavas).

Answer 2

Un HBox o un VBox intentarán tanto como sea posible para mostrar su contenido sin barras de desplazamiento. Esto obliga a un contenedor primario (a menudo hasta la Aplicación principal) a ser el que debe desplazarse si el contenido es demasiado grande para caber en los límites disponibles.

Detrás de escena, el HBox o VBox está estableciendo las propiedades medidoMinWidth y measuredMinHeight en su función measure () para que coincida con las dimensiones requeridas por sus hijos. El contenedor principal respetará esa recomendación y la tarea de desplazamiento se moverá hacia arriba en la lista de visualización.

La solución de hasseg funciona en muchos casos porque detiene la medición del contenedor, pero es un poco hacky. Esto es lo que puede hacer sin crear subclases de reemplazo para sus contenedores. En la instancia del contenedor en la que desea desplazarse, configure minWidth o minHeight en 0 . Esto tendrá prioridad sobre las propiedades medidoMinWidth o measuredMinHeight de ese contenedor, lo que permite al padre establecer el tamaño real a algo más manejable.

Answer 3

En lugar de envolver el VBox en un lienzo, configure la propiedad minHeight del VBox para que tenga la barra de desplazamiento en 0.

Answer 4

Tu problema se parece mucho a uno con el que luché hace algún tiempo. Encontré mi respuesta en esta discusión : simplemente deshabilite la implementación de measure() de la Box .

Esta fue una solución bastante fácil que funcionó perfectamente en mi caso y no ha causado ningún "daño colateral". Tus resultados pueden variar

package whatever
{
    import mx.containers.Box;

    /**
    * A Box that has no measure() implementation.
    * 
    * <p>
    * See http://old.nabble.com/-flex_india%3A3318--Size-layout-issues-with-respect-to-parent-containers-to12882767.html
   *  for more info.
    * </p>
    */
    public class NonMeasuredBox extends Box
    {
        /**
        * Constructor
        */
        public function NonMeasuredBox():void
        {
            super();
        }

        override protected function measure():void { /* disabled */ }
    }
}