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事件。

更好的方法是让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";
}

您需要原始按钮和菜单上的鼠标处理程序。您可能需要进行一些调整，但希望这显示出基本的想法。

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

1 个答案: