How to switch between Vertical and Tile layout in Flex 4.5

I need to have a spark list that switches between VerticalLayout and TileLayout depending on the user choice. The most obvious way is create two lists with separate layouts and then use States and the "includeIn" attribute. However, this is not a very good solution because I would like to keep the same items in the view when switching (if user scrolled to item 100 in the VerticalLayout and then switches to Tile, I would like item 100 to be visible immediately in the new layout, instead of starting at the first item).

So I tried using 2 layouts on the same list and using the "includeIn" solution. However, I get this error:

"In initializer for 'layout', multiple initializer values for target type spark.layouts.supportClasses.LayoutBase."

Here's the source code that generates this error, can anyone suggest a better way to do this?

<?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开发者_Go百科"
    >

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

Thank you

You were almost there. You can do exactly what you were attempting, you just have to write it slightly differently. Something like this:

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

When you think about it, this is this exact same way of writing state dependent properties as this example:

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

The only difference is that the property is written as an (M)XML tag rather than as an (M)XML attribute.

Alternatively, you can declare your layouts with ids in the declaration part of your MXML and refer to those ids instead of declaring them inline :

<fx:Declarations>
    <s:VerticalLayout id="verticalLayout" horizontalAlign="justify" useVirtualLayout="true" />
    <s:TileLayout id="tileLayout" rowHeight="300" useVirtualLayout="true" />
</fx:Declarations>

<s:List id="list" 
    width="100%" height="100%" 
    dataProvider="{myAC}" 
    layout.ListState="{verticalLayout}" layout.TileState="{tileLayout}" />