apache flex - 如何使用 dataProvider 动态填充 mx:ViewStack 以进行选项卡式导航

Question

我现在很困，所以这只是我想要的一个例子（显然这段代码是错误的）：

<?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">
    <fx:Declarations>
        <s:ArrayCollection id="dp"> 
            <fx:Object label="Just a label" text="Bla bla bla..."/>
            <fx:Object label="Just a label" text="Bla bla bla..."/>
            <fx:Object label="Just a label" text="Bla bla bla..."/>
        </s:ArrayCollection>
    </fx:Declarations>
    <s:ButtonBar dataProvider="{tabs}" />
    <mx:ViewStack id="tabs" resizeToContent="true">
        <s:DataGroup dataProvider="{dp}">
            <s:NavigatorContent label="{data.label}">
                <s:Label text="{data.text}"/>
            </s:NavigatorContent>
        </s:DataGroup>
    </mx:ViewStack>
</s:Application>

我怎么能做这样的事情？（导航内容将是itemRenderer，按钮栏非常重要）。

Answer 1

您不能直接将数据组放入ViewStack...项目需要实现INavigatiorContent。

所以，这是我能想到的最好的。 它当然不会处理ArrayCollection更新或比这更高级的任何内容，但这是一个开始。

<s:VGroup>
    <s:ButtonBar dataProvider="{tabs}" />
    <mx:ViewStack id="tabs" resizeToContent="true"  >
        <mx:addedToStage>
            <![CDATA[
                for(var i:int = 0; i < dp.length; i++) {
                    var label:Label = new Label();
                    label.text = dp.getItemAt(i).text;
                    var context:NavigatorContent = new NavigatorContent();
                    context.label = dp.getItemAt(i).label;
                    context.addElement(label);
                    tabs.addChild(context);
                }
            ]]>
        </mx:addedToStage>
    </mx:ViewStack>
</s:VGroup>

如果我真的要做到这一点，我会创建一个新类，该类派生自包含dataProvider属性的ViewStack。 在内部，我会听取集合上的更改，以便它添加/删除项目。 此类还将包含一个 itemRenderer 属性，以便您可以定义选项卡的外观。

这样做的问题是，对于选项卡，通常，您具有与数据相关的特定视图。 您可能希望包含一个itemRendererFunction来为您进行映射。

它会变得有点凌乱和漏水...但你可以实现它。