Question

我需要一个根据用户选择在VerticalLayout和TileLayout之间切换的spark列表。最明显的方法是创建具有单独布局的两个列表，然后使用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属性。

Answer 2

或者，您可以在MXML的声明部分中使用id声明布局，并引用这些ID而不是内联声明它们：

<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}" />

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

2 个答案: