TileGroup: รีเฟรชเค้าโครงเมื่อปรับขนาด

ฉันเพิ่งเริ่มใช้ mxml ในการสร้างแอป

โดยพื้นฐานแล้ว ฉันกำลังสร้างรายการไทล์ (6 รายการ) โดยใช้ TileGroup เมื่อเริ่มต้นในมุมมองแนวตั้ง จะดูดี (3 ในแถวแรกและ 3 ในแถวที่สอง)

อย่างไรก็ตาม เมื่อฉันเปลี่ยนการวางแนว ฉันต้องการให้ไทล์วาดใหม่ตามความกว้างและความสูงใหม่

จาก stack overflow ฉันพบว่าสามารถฟังการปรับขนาดเหตุการณ์ได้ แต่ฉันไม่รู้ว่าจะทำให้ TileGroup วาดใหม่ได้อย่างไร

ตอนแรกฉันคิดว่าฉันสามารถใช้ autoLayout สำหรับ TileGroup ได้ แต่นั่นไม่ได้ทำเคล็ดลับ ฉันกำลังประสบปัญหาในการค้นหาวิธีแก้ปัญหา (บางทีฉันอาจไม่ได้ใช้คำสำคัญที่ถูกต้อง)

มีฟังก์ชั่นที่ฉันสามารถเรียกเพื่อวาดใหม่ได้หรือไม่?

หรือมีวิธีอื่นในการทำให้ไทล์ของฉันตอบสนองต่อการวางแนวหรือไม่?

นี่คือรหัสของฉัน:

<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>   

Please advice! Thanks!

จัสติน