TILEGROUP: Actualizar el diseño en el cambio de tamaño

Question

Soy nuevo en usar MXML para construir aplicaciones.

Básicamente, estoy construyendo una lista de mosaicos (6 de ellas) usando TileGroup. Cuando se inicializa en la vista del retrato, se ve muy bien (3 en la primera fila y 3 en la segunda).

Sin embargo, cuando cambio la orientación, quiero que las fichas vuelvan a dibujar en función del nuevo ancho y la altura.

Desde Stack Overflow, descubrí que puedo escuchar el evento de cambio de tamaño. Pero, no sé cómo hacer que el azulego vuelva a dibujar.

Inicialmente, pensé que podría usar Autolayout para TileGroup. Pero eso no hizo el truco. Estoy teniendo dificultades para buscar una solución (tal vez no estaba usando las palabras clave correctas).

¿Hay alguna función a la que pueda llamar para volver a dibujar?

¿O hay otra forma de hacer que mi mosaico responda a la orientación?

Aquí está mi código:

<components:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" xmlns:components="spark.components.*" 
             title="Forex Calculator">
<components:states>
    <s:State name="portrait"/>
    <s:State name="landscape"/>
</components:states>
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<s:TileGroup id="mainGroup" includeIn="portrait, landscape" autoLayout="true">
    <s:Rect width="75" height="75">
        <s:fill>
            <s:SolidColor color="0xd54f4f"/>
        </s:fill>
    </s:Rect>
    <s:Rect width="75" height="75">
        <s:fill>
            <s:SolidColor color="0x2f977d"/>
        </s:fill>
    </s:Rect>
    <s:Rect width="75" height="75">
        <s:fill>
            <s:SolidColor color="0xfffca2"/>
        </s:fill>
    </s:Rect>
    <s:Rect width="75" height="75">
        <s:fill>
            <s:SolidColor color="0xfffca2"/>
        </s:fill>
    </s:Rect>
    <s:Rect width="75" height="75">
        <s:fill>
            <s:SolidColor color="0xfffca2"/>
        </s:fill>
    </s:Rect>
</s:TileGroup>   

¡Por favor aconséjame! ¡Gracias!

Justin

Answer 1

Re-sayout basado en el cambio de tamaño ocurre automáticamente. Sin embargo, si no proporciona un contenedor (su TileGroup En este caso) con algunas reglas de tamaño específicas, aplicará su comportamiento de dimensionamiento predeterminado, que es ajustar a su contenido. Obviamente, ese contenido no cambia si estás en el estado de retrato o paisaje, por lo que no pasa nada.

No estoy exactamente seguro de lo que estás tratando de hacer, pero configurando width="100%" height="100%" estirará el TileGroup En toda la pantalla. Es decir, su tamaño se calculará en función del tamaño de su contenedor principal en lugar de su contenido. Por lo tanto, el número de columnas/filas cambiará cuando cambie el estado.