Question

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

当选择第二个项目时，两个有一些效果并稍微移动到左侧。

当第三个项目被选中时，三个有一些效果并略微移动到左侧，两个移动到原来的位置。

请帮助我......

提前致谢

Answer 1

检查一下，这可能是一个很好的开始：

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

Answer 2

这个简单的应用程序演示了使用空格执行此操作的基本方法，它不是任何方式的防弹，但它可以工作，并且它构建在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>

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

感觉有点笨重，你可以做一些更平滑的效果。

单击linkbaritem时更改LinkBarItem的文本

2 个答案: