单击 linkbaritem 时更改 LinkBarItem 的文本

Question

我想创建一个自定义链接栏，其中所选项目在文本或其他任何内容之前显示有一些空格，如下图所示。

当选择第二个项目时，“二”会产生一些效果并稍微向左侧移动。

当选择第三个项目时，“三”会产生一些效果并稍微向左侧移动，“二”会在其原始位置移动。

请帮助我...

提前致谢

Answer 1

这个简单的应用程序演示了使用空格执行此操作的基本方法，它无论如何都不是防弹的，但它可以工作，并且它构建在 Flex SDK 3.6 上。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="100%" height="100%">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            import mx.events.ItemClickEvent;
            private var _labels:Array = ["link 1", "link 2", "link 3"];
            private var _links:ArrayCollection = new ArrayCollection();

            /**
             * Creation complete handler for linkbar.
             * Sets up the link bar data provider.
             * 
             * @param FlexEvent creation complete event dispatched from link bar
             * */
            private function links_creationCompleteHandler(event:FlexEvent):void{
                resetLinks();
                linkBar.dataProvider = _links;
            }

            /**
             * Item click handler for link bar.
             * Checks if user has selected the same link again.
             * If not then resets the link bar data provider with original label values.
             * Then adds event.label with 4 leading spaces at the index of the same string in array col.
             * Then removes the original string form the array col.
             * 
             * @param ItemClickEvent dispatched from link bar
             * */
            private function links_itemClickHandler(event:ItemClickEvent):void{
                if (event.label.search("    ") == -1){
                    resetLinks();
                    _links.addItemAt("    " + event.label, event.index);
                    _links.removeItemAt(event.index + 1);
                }

            }

            /**
             * Remove all items from the link bar data provider.
             * Then add back in the original items to reset item labels.
             * */
            private function resetLinks():void{
                _links.removeAll();
                for each (var str:String in _labels){
                    _links.addItem(str);
                }
            }

        ]]>
    </mx:Script>

    <mx:LinkBar id="linkBar"
                direction="vertical"
                creationComplete="links_creationCompleteHandler(event)"
                width="100"
                itemClick="links_itemClickHandler(event)"/>
</mx:Application>

总之，它只是在所选项目标签的前面添加了一些空格。它通过每次链接栏调度项目单击事件时重置链接栏数据提供程序来实现此目的。然后为所选项目添加替换标签，删除旧标签。

感觉有点笨重，你可能可以用效果做一些更流畅的事情。

Answer 2

看看这个，这可能是一个很好的开始：

<s:layout>
    <s:VerticalLayout gap="10"/>
</s:layout>

<fx:Script>
    <![CDATA[
        import mx.controls.LinkButton;
        import mx.events.ItemClickEvent;

        import spark.effects.animation.RepeatBehavior;

        [Bindable] public var offset:Number = 50;


        protected function animateLink(event:ItemClickEvent):void {
            _resetOtherButtons(event.index);

            var linkButton:LinkButton = event.relatedObject as LinkButton;
            if (linkButton) {
                var moveEffect:Move = moveEffects.getItemAt(event.index) as Move;
                if (moveEffect) {
                    moveEffect.target = linkButton;
                    if (moveEffect.isPlaying || (linkButton.x - offset) >= linkbar.x) {
                        moveEffect.xTo = linkbar.x + linkbar.getStyle("paddingLeft");
                    } else {
                        moveEffect.xTo = linkbar.x + linkbar.getStyle("paddingLeft") + offset;
                    }
                    moveEffect.play();
                }
            }
        }


        protected function _resetOtherButtons(index:int):void {
            var length:int = moveEffects.length;
            for (var i:int=0; i < length; i++) {
                if (i != index) {
                    var moveEffect:Move = moveEffects.getItemAt(i) as Move;
                    if (moveEffect) {
                        moveEffect.xTo = linkbar.x + linkbar.getStyle("paddingLeft");
                        moveEffect.play();
                    }
                }
            }
        }
    ]]>
</fx:Script>

<mx:LinkBar id="linkbar" direction="vertical" itemClick="animateLink(event)" width="100" textAlign="left">
    <mx:dataProvider>
        <s:ArrayCollection>
            <fx:String>Test1</fx:String>
            <fx:String>Test2</fx:String>
            <fx:String>Test3</fx:String>
        </s:ArrayCollection>
    </mx:dataProvider>
</mx:LinkBar>

<fx:Declarations>
    <s:ArrayCollection id="moveEffects">
        <s:Move/>
        <s:Move/>
        <s:Move/>
    </s:ArrayCollection>
</fx:Declarations>