2

私はFlexにかなり慣れていません。ページ中央の右端に、カーソルを合わせると複数のボタンが入ったスライド式サイドバーが表示されるボタン（アイコン）を作成したいと思います。ユーザーがボタンバーの外にカーソルを合わせると、再びスライドして戻ります。

概念的には、その基本を機能させることができました。私が抱えている問題は、ユーザーがサイドバーのボタン間でマウスを動かすと、状態が変化してキックし、サイドバーが再びスライドして戻ることです。さまざまな種類のコンテナを使用してみましたが、同じ結果が得られました。

何かアドバイス？

ありがとう、

タム

ここにコードがあります：

<?xml version="1.0" encoding="utf-8"?>
<s:VGroup
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/halo"
    xmlns:vld ="com.lal.validators.*"
    xmlns:effect="com.lal.effects.*" 
    width="150"
    horizontalAlign="right"
    gap="0">

    <fx:Script>
        <![CDATA[
            import com.lal.model.LalModelLocator;
            var _model:LalModelLocator = LalModelLocator.getInstance();

        ]]>
    </fx:Script>
    <fx:Declarations>
        <mx:ArrayCollection id="someData"> 
        </mx:ArrayCollection>
    </fx:Declarations>
    <s:states>
        <s:State name="normal" />
        <s:State name="expanded" />
    </s:states>
    <fx:Style source="/styles.css"/>
    <s:transitions>
        <s:Transition fromState="normal" toState="expanded"  >
            <s:Sequence>
                <s:Wipe direction="left" duration="250" target="{buttonsGroup}"  />
            </s:Sequence>

        </s:Transition>
        <s:Transition fromState="expanded" toState="normal"  >
            <s:Sequence>            
                <s:Wipe direction="right" duration="250" target="{buttonsGroup}"  />
            </s:Sequence>   
        </s:Transition>
    </s:transitions>
    <s:Button skinClass="com.lal.skins.CalendarButtonSkin" id="calendarIconButton" 
              includeIn="normal"
              verticalCenter="0"
              mouseOver="currentState = 'expanded'"/>

    <s:Panel includeIn="expanded" id="buttonsGroup"           
              mouseOut="currentState = 'normal' "
              width="150" height="490" >
        <s:layout>
            <s:VerticalLayout gap="0" paddingRight="0" />
        </s:layout>
        <s:Button id="mondayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/>
        <s:Button id="tuesdayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/>
        <s:Button id="wednesdayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/>
        <s:Button id="thursdayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/>
        <s:Button id="fridayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/>
        <s:Button id="saturdayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/>
        <s:Button id="sundayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/>
    </s:Panel>

</s:VGroup>
4

1 に答える 1

3

私が正しく理解していれば、一種のアニメーション化されたポップアップメニューの動作を作成したいと思うでしょう。ユーザーが元のボタンにカーソルを合わせたときにパネルを表示し、ユーザーがメニューからマウスを離したときにパネルを再び非表示にします。

問題は、mouseOutのパネルをすぐに非表示にしていることです。ユーザーがパネル内のコンポーネント間でカーソルを移動すると、mouseOutイベントが頻繁に発生するため、これは望ましいことではありません。

より良いアプローチは、mouseOutイベントにタイマーを開始させ、少し遅れて遷移を開始し、その間に別のmouseOverイベントを受信した場合はこのタイマーをキャンセルすることです。

これは次のようになります（テストされていません）：

mouseOver="showMenu()"
mouseOut="hideAfterDelay()"

protected var t:Timer;

protected function hideAfterDelay ():void {
    killTimer();
    t = new Timer(500, 1);
    t.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);
    t.start();
}

protected function onTimerComplete ():void {
    currentState = "normal";
    killTimer();
}

protected function killTimer ():void {
    if (t) {
        t.removeEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);
        t.stop();
        t = null;
    }
}

protected function showMenu ():void {
    killTimer();
    currentState = "expanded";
}

元のボタンとメニューの両方にマウスハンドラーが必要です。いくつかの調整が必要になる場合がありますが、これが基本的な考え方を示していることを願っています。

于 2010-03-16T00:46:00.463 に答える