如何在Flex 4.5中切换垂直和平铺布局

Question

我需要有一个Spark列表,根据用户的选择在VerticalLayout和TileLayout之间切换.最明显的方法是创建具有单独布局的两个列表,然后使用States和"includeIn"属性.但是,这不是一个非常好的解决方案,因为我想在切换时在视图中保留相同的项目(如果用户在VerticalLayout中滚动到项目100,然后切换到Tile,我希望项目100立即可见新布局,而不是从第一项开始).

所以我尝试在同一个列表上使用2个布局并使用"includeIn"解决方案.但是,我收到此错误:

"在'layout'的初始化程序中,目标类型为spark.layouts.supportClasses.LayoutBase的多个初始值设定值."

以下是生成此错误的源代码,有人可以建议更好的方法吗？

<?xml version="1.0" encoding="utf-8"?>
<s:View 
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"
    >

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            [Bindable]
            public var myAC:ArrayCollection = new ArrayCollection([
                "01","02","03","04","05","06","07","08","09","10",
                "11","12","13","14","15","16","17","18","19","20",
                "21","22","23","24","25","26","27","28","29","30",
                "31","32","33","34","35","36","37","38","39","40",
                "41","42","43","44","45","46","47","48","49","50"
            ]);

            public function toggleListTileState():void
            {
                if(currentState=="ListState") currentState = "TileState"
                else currentState = "ListState";
            }
        ]]>    
    </fx:Script>

    <s:actionContent>
        <s:Button label="tile" label.TileState="list" click="toggleListTileState()"/>
    </s:actionContent>  

    <s:states> 
        <s:State name="ListState" /> 
        <s:State name="TileState" /> 
    </s:states>

    <s:List
        id="list"
        width="100%"
        height="100%"
        dataProvider="{myAC}"
        >
        <s:layout>
            <s:VerticalLayout
                includeIn="ListState"
                horizontalAlign="justify"
                useVirtualLayout="true"
                />

            <s:TileLayout
                includeIn="TileState"
                rowHeight="300"
                useVirtualLayout="true"
                />
        </s:layout>
    </s:List>

</s:View>

谢谢

Answer 1

你快到了.您可以完全按照您的尝试进行操作,只需稍微改写即可.像这样的东西:

<s:List id="list" width="100%" height="100%" dataProvider="{myAC}">
    <s:layout.ListState>
        <s:VerticalLayout horizontalAlign="justify" useVirtualLayout="true" />
    </s:layout.ListState>
    <s:layout.TileState>
        <s:TileLayout rowHeight="300" useVirtualLayout="true" />
    </s:layout.TileState>
</s:List>

当你考虑它时,这就像编写状态依赖属性一样,就像这个例子:

<s:List id="list" width.ListState="100" width.TileState="200" />

唯一的区别是该属性被写为(M)XML标记而不是(M)XML属性.