Linkbar不会使所选索引变为高亮显示

时间:2015-08-23 21:17:18

标签: actionscript-3 flex flex4

我有一个没有突出显示所选链接的LinkBar。 LinkBar有问题吗?

这是我的代码:

var thumbs = document.getElementsByClassName("thumb");
for (var i = 0; i < thumbs.length; i++) {
    thumbs[i].onclick = (function(index){
        return function() {
            document.getElementById("big").style.backgroundImage = "url('" + urls[index] + "')"
        }
    })(i);
}

我使用的是Flex 4.6,我将Spark组件与mx组件混合在一起。如果我在LinkBar MXML中设置selectedIndex,那么它会在视觉上停留在该项目上。它以编程方式更改,selectedIndex显示正确的值。

更新
无法弄清楚这一点,所以我使用的是ButtonBar。不幸的是,如果您没有设置dataProvider或将其设置为没有项目的ArrayList,ButtonBar似乎会挂起整个应用程序。

1 个答案:

答案 0 :(得分:1)

您必须将ViewStack用作dataProvider:

 <s:VGroup>
    <mx:LinkBar id="languageTypeButtons"
                selectedIndex="0"
                itemClick="languageType_changeHandler()"
                dataProvider="{languageTypesViewStack}">
    </mx:LinkBar>
    <mx:ViewStack id="languageTypesViewStack" borderStyle="solid" width="100%" height="80%">
        <mx:Canvas id="htmlID" backgroundColor="#FFFFCC" label="{HTML}" width="100%" height="100%">
            <mx:Label text="HTML Selected" color="#000000"/>
        </mx:Canvas>
        <mx:Canvas id="mxmlID" backgroundColor="#CCFFFF" label="{MXML}" width="100%" height="100%">
            <mx:Label text="MXML Selected" color="#000000"/>
        </mx:Canvas>
        <mx:Canvas id="AndroidID" backgroundColor="#FFCCFF" label="{ANDROID}" width="100%" height="100%">
            <mx:Label text="Android Selected" color="#000000"/>
        </mx:Canvas>
    </mx:ViewStack>

</s:VGroup>

如果你真的想使用你的字符串ArrayList作为dataProvider,那么这是一个解决方法:

<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:Script><![CDATA[
    public static const HTML:String = "HTML";
    public static const MXML:String = "MXML";
    public static const ANDROID:String = "Android";

    private function languageType_changeHandler():void
    {
        var tempSelectedIndex:Number = languageTypeButtons.selectedIndex;
        for (var i = 0; i < languageTypes.length; i++)
        {
            languageTypeButtons.selectedIndex = i
            languageTypeButtons.validateNow();
        }
        languageTypeButtons.selectedIndex = tempSelectedIndex;
    }

    ]]></fx:Script>
<fx:Declarations>
    <s:ArrayList id="languageTypes">
        <fx:String>{MXML}</fx:String>
        <fx:String>{HTML}</fx:String>
        <fx:String>{ANDROID}</fx:String>
    </s:ArrayList>
</fx:Declarations>

<mx:LinkBar id="languageTypeButtons"
            selectedIndex="0"
            itemClick="languageType_changeHandler()"
            dataProvider="{languageTypes}">
</mx:LinkBar>

</s:Application>