Flex VerticalLayout基于状态的Horizo​​ntalLayout元素顺序

Question

在我的mxml部分我有

    <s:layout.landscape>
    <s:HorizontalLayout />
</s:layout.landscape>

<s:layout.portrait>
    <s:VerticalLayout />
</s:layout.portrait>

在这些标签之后我有几个组件，例如

<s:Button label="button 1"/>
<s:Button label="button 2"/>

我想要做的是在输入纵向或横向状态后更改这些组件的顺序。例如，在纵向中，我有垂直布局按钮1，然后是按钮2 在横向上我有水平布局，其中button2后跟按钮1。

Answer 1

您可以使用this.swapElements(button1,button2);

示例： -

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               minWidth="955" minHeight="600" currentState="landscape">
    <s:states>
        <s:State name="landscape"/>
        <s:State name="portrait"/>
    </s:states>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import spark.events.IndexChangeEvent;


            protected function dropdownlist1_changeHandler(event:IndexChangeEvent):void
            {
                // TODO Auto-generated method stub
                if(event.target.selectedIndex == 0)
                {
                    this.currentState = event.target.dataProvider[0];
                    this.swapElements(button1,button2);
                }
                else
                {
                    this.currentState = event.target.dataProvider[1];
                    this.swapElements(button2,button1);
                }
            }
        ]]>
    </fx:Script>

    <s:layout.landscape>
        <s:HorizontalLayout />
    </s:layout.landscape>

    <s:layout.portrait>
        <s:VerticalLayout />
    </s:layout.portrait>

    <s:DropDownList selectedIndex="0" change="dropdownlist1_changeHandler(event)">  
        <s:ArrayCollection>
            <fx:String>landscape</fx:String>
            <fx:String>portrait</fx:String>
        </s:ArrayCollection>
    </s:DropDownList>

    <s:Button id="button1" label="button 1"/>
    <s:Button id="button2" label="button 2"/>

</s:Application>

希望这可能有所帮助...