如何在Flex中製作滑動按鈕側邊欄

Question

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

Answer 1

如果我理解正確的，你想創造一種動畫彈出菜單的行爲。當用戶將鼠標懸停在原始按鈕上時，您想要顯示該面板，並在用戶將鼠標從菜單上移開時再次將其隱藏。

你的問題是，你會立即隱藏鼠標移開時面板。這不是你想要的，因爲當用戶在面板內的組件之間移動光標時，你會經常得到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"; 
} 

您需要對原有按鈕和菜單都鼠標處理程序。你可能需要做一些調整，但希望這可以顯示出基本的想法。