изменить текст LinkBarItem при нажатии linkbaritem

Question

Я хочу создать пользовательский LinkBar, в котором выбранный элемент отображается с пробелом перед текстом или чем-либо еще, как показано на рисунке ниже.

при выборе второго элемента эффект Two имеет некоторый эффект и слегка смещается влево.

при выборе третьего элемента Three имеет некоторый эффект и слегка смещается влево, а Two перемещается в исходное положение.

Пожалуйста, помогите мне ...

Заранее спасибо

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>