Как переключаться между вертикальной и мозаичной компоновкой в ​​Flex 4.5

Мне нужен искровой список, который переключается между VerticalLayout и TileLayout в зависимости от выбора пользователя. Самый очевидный способ — создать два списка с отдельными макетами, а затем использовать состояния и атрибут «includeIn». Однако это не очень хорошее решение, потому что я хотел бы, чтобы при переключении отображались одни и те же элементы (если пользователь прокрутил до элемента 100 в VerticalLayout, а затем переключился на плитку, я бы хотел, чтобы элемент 100 был виден сразу в новый макет вместо того, чтобы начинать с первого элемента).

Поэтому я попытался использовать 2 макета в одном списке и использовать решение «includeIn». Однако я получаю эту ошибку:

"В инициализаторе макета несколько значений инициализатора для целевого типа 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>

Спасибо


apache-flex flex4.5
person Andy    schedule 01.09.2011    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Ты был почти там. Вы можете сделать именно то, что пытались сделать, вам просто нужно написать это немного по-другому. Что-то вроде этого:

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

person RIAstar    schedule 01.09.2011
comment
Ницца! работает отлично. вот почему я люблю этот сайт. @Exort Альтернативный метод, упомянутый ниже, работает так же хорошо, я думаю, это просто вопрос предпочтения, какой из них использовать. Спасибо вам обоим. - person Andy; 01.09.2011
comment
Спасибо, польза от этого невероятная! - person Orgmir; 05.04.2013

arrow_upward
2
arrow_downward

В качестве альтернативы вы можете объявить свои макеты с идентификаторами в части объявления вашего MXML и ссылаться на эти идентификаторы вместо объявления их встроенными:

<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}" />
person Exort    schedule 01.09.2011