Apache flex 如何在Flex中制作滑动按钮边栏

我对Flex还不太熟悉。我想在页面右边的右下角做一个按钮（图标），显示一个滑动的边栏，上面有多个按钮。我希望当用户将鼠标悬停在按钮栏外时，它会再次向后滑动

从概念上讲，我已经掌握了这方面的基本知识。我遇到的问题是，当用户在侧边栏中的按钮之间移动鼠标时，它会在改变状态时启动，侧边栏会再次向后滑动。我尝试使用不同类型的容器，得到了相同的结果

有什么建议吗

谢谢

Tam

代码如下：

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

---

如果我理解正确，您希望创建一种动画弹出菜单行为。您希望在用户将鼠标悬停在原始按钮上时显示面板，并在用户将鼠标移离菜单时再次隐藏面板

您的问题是，您立即将面板隐藏在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";
}