添加 mouseOver/mouseDown/mouseUp/等。自定义 MXML 组件答案

【问题标题】：Adding mouseOver/mouseDown/mouseUp/etc. to custom MXML component添加 mouseOver/mouseDown/mouseUp/等。自定义 MXML 组件
【发布时间】：2011-10-31 17:08:01
【问题描述】：

我是 Flex 新手，正在将纯 Flash/AS3 应用程序移植到 Flex 4.5

我已经创建了一个基于BorderContainer 的自定义 MXML 组件

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    width="160" height="140" >

    <s:Image id="_avatar" enableLoadingState="true" 
        x="0" y="0" width="160" height="120" />

    <s:Label id="_username" x="0" y="125" 
        fontSize="12" fontWeight="bold" /> 

</s:BorderContainer>

我正在尝试在 mouseOver 上添加突出显示/增长效果

以及对该组件的 mouseDown 的“按下”效果：

<fx:Script>
    <![CDATA[
        import flash.filters.*;

        public static const SHADOW:Array = [ new DropShadowFilter(8, 
            80, 0x000000, 0.2, 32, 32, 1, 1, false, false, false) ];
        public static const GLOW:Array = [ new GlowFilter(0xFFFF00, 
            0.5, 36, 36, 1, 1, false, false) ];

        private var _oldScale:Number;

        private function mouseOver(event:MouseEvent):void {
            _oldScale = scaleX;
            filters = GLOW;
        }

        private function mouseDown(event:MouseEvent):void {
            _oldScale = scaleX;
            scaleX *= 0.95;
            scaleY *= 0.95;
            filters = null;
        }

        private function mouseUp(event:MouseEvent):void {
            scaleX = scaleY = _oldScale;
    filters = GLOW;
        }

        private function mouseOut(event:MouseEvent):void {
            scaleX = scaleY = _oldScale;
            filters = SHADOW;
        }

不幸的是，这些方法根本没有被调用。

在纯 Flash/AS3 应用中我会调用

        addEventListener(MouseEvent.MOUSE_OVER, handleMouseOver);
        addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
        addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
        addEventListener(MouseEvent.MOUSE_OUT, handleMouseOut);
        addEventListener(MouseEvent.CLICK, handleMouseClick);

它会很好用，但在 Flex 4.5 中我不知道该怎么做。

我还注意到有一个 dropShadowVisible="true" 属性，但不确定它是否/如何用于我的目的。

我不确定是否允许在 flex 中放大/缩小自定义组件，或者我可能应该使用“Flex Effects”（但如何？）并设置 disableLayout="true" ?

【问题讨论】：

我很确定容器不会分派鼠标事件。您将需要一个实际的 UI 控件。但是，如果 UI 控件冒泡事件；您应该能够在容器上为它们添加侦听器。
您是否在这种情况下添加了事件侦听器？因为你也可以在 flex 中做到这一点，因为无论如何你都在使用 actionscript

标签： apache-flex flex4 mxml flex4.5 custom-component

【解决方案1】：

以下两种方法中的任何一种都适用于 Flex 4.5：

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx" 
width="160" height="140" 
mouseOut="handleMouseOut(event)"
mouseDown="handleMouseDown(event)"
mouseUp="handleMouseUp(event)"
mouseOver="handleMouseOver(event)"
creationComplete="init(event)">

<fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;

        public function init(event:FlexEvent):void {
                /*
                addEventListener(MouseEvent.MOUSE_OVER, handleMouseOver);
                addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
                addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
                addEventListener(MouseEvent.MOUSE_OUT, handleMouseOut);
                addEventListener(MouseEvent.CLICK, handleMouseClick);
                */
         }

谢谢你，Mansuro，我无法给你答案，但我赞成你的评论。

【讨论】：