目前我正在尝试创建一个容器B，它位于另一个容器A中。 容器B默认是不可见的，当进入容器A时，它应该变为可见并且是交互式的。 （想象容器B作为按钮）
我正在使用以下代码
<fx:Script>
<![CDATA[
protected function mouseOverHandler(event:MouseEvent):void
{
this.voter.conB = true;
this.voter.conB = true;
this.addElement(this.conB);
}
protected function mouseOutHandler(event:MouseEvent):void
{
this.conB.visible = false;
this.conB.enabled = false;
this.addElement(this.conA);
}
]]>
</fx:Script>
<s:element id="conB" visible="false"/>
<s:element id="conA" mouseOver="mouseOverHandler(event)" mouseOut="mouseOutHandler(event)"/>
基本上它的工作，我的问题是，当我翻过containerB然后flex计数为容器A的mouseOutEvent，这使得containerB再次不可见，而不是鼠标在容器A上，因为B是不可见的，B又是触发可见。 结果是对容器b的闪烁效果，这也使得无法单击容器b中的按钮。
任何想法如何解决这个问题/另一种方式来实现我的意图？
答案 0 :(得分：1)
嗯，不是那不是问题。
这里的代码是什么：
基本上我用自定义皮肤（此处命名为“test”）测试它的火花按钮类，这里看起来像它，但就像我说的未经编辑的纯自动生成的灵活代码为spark按钮类定义新外观时
<?xml version="1.0" encoding="utf-8"?>
<!--
ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
-->
<!--- The default skin class for the Spark Button component.
@see spark.components.Button
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="21" minHeight="21" alpha.disabled="0.5">
<!-- host component -->
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
/* Define the skin elements that should not be colorized.
For button, the graphics are colorized but the label is not. */
static private const exclusions:Array = ["labelDisplay"];
/**
* @private
*/
override public function get colorizeExclusions():Array {return exclusions;}
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
/**
* @private
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
{
var cr:Number = getStyle("cornerRadius");
if (cornerRadius != cr)
{
cornerRadius = cr;
shadow.radiusX = cornerRadius;
fill.radiusX = cornerRadius;
lowlight.radiusX = cornerRadius;
highlight.radiusX = cornerRadius;
border.radiusX = cornerRadius;
}
if (highlightStroke) highlightStroke.radiusX = cornerRadius;
if (hldownstroke1) hldownstroke1.radiusX = cornerRadius;
if (hldownstroke2) hldownstroke2.radiusX = cornerRadius;
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
private var cornerRadius:Number = 2;
]]>
</fx:Script>
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<!-- layer 1: shadow -->
<!--- @private -->
<s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x000000"
color.down="0xFFFFFF"
alpha="0.01"
alpha.down="0" />
<s:GradientEntry color="0x000000"
color.down="0xFFFFFF"
alpha="0.07"
alpha.down="0.5" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 2: fill -->
<!--- @private -->
<s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"
color.over="0xBBBDBD"
color.down="0xAAAAAA"
alpha="0.85" />
<s:GradientEntry color="0xD8D8D8"
color.over="0x9FA0A1"
color.down="0x929496"
alpha="0.85" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 3: fill lowlight -->
<!--- @private -->
<s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2">
<s:fill>
<s:LinearGradient rotation="270">
<s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />
<s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />
<s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 4: fill highlight -->
<!--- @private -->
<s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="2">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"
ratio="0.0"
alpha="0.33"
alpha.over="0.22"
alpha.down="0.12"/>
<s:GradientEntry color="0xFFFFFF"
ratio="0.48"
alpha="0.33"
alpha.over="0.22"
alpha.down="0.12" />
<s:GradientEntry color="0xFFFFFF"
ratio="0.48001"
alpha="0" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 5: highlight stroke (all states except down) -->
<!--- @private -->
<s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="2" excludeFrom="down">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
<s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 6: highlight stroke (down state only) -->
<!--- @private -->
<s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="2" includeIn="down">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />
<s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />
<s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />
<s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />
<s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!--- @private -->
<s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="2" includeIn="down">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />
<s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
<!--- @private -->
<s:Rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000"
alpha="0.5625"
alpha.down="0.6375" />
<s:GradientEntry color="0x000000"
alpha="0.75"
alpha.down="0.85" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 8: text -->
<!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
<s:Label id="labelDisplay"
textAlign="center"
verticalAlign="middle"
maxDisplayedLines="1"
horizontalCenter="0" verticalCenter="1"
left="10" right="10" top="2" bottom="2">
</s:Label>
</s:SparkSkin>
接下来我们将自定义组件命名为“container”，如
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:components="components.*"
width="200" height="100">
<s:TextArea id="text_box" width="100%" height="100%">
</s:TextArea>
<s:HGroup id="my_container" gap="20" width="100" height="40" verticalCenter="0" horizontalCenter="0">
<components:test/>
<s:button />
</s:HGroup>
</s:Group>
最后我们把它放到主应用程序中，如：
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" height="100" width="200" xmlns:components="components.*" backgroundAlpha="0">
<fx:Declarations>
</fx:Declarations>
<fx:Script>
<![CDATA[
protected function mouseOverHandler(event:MouseEvent):void
{
this.myObject.my_container.visible = true;
this.myObject.my_container.enabled = true;
}
protected function mouseOutHandler(event:MouseEvent):void
{
this.myObject.my_container.visible = false;
this.myObject.my_container.enabled = false;
}
]]>
</fx:Script>
<components:Comment id="myObject" mouseOver="mouseOverHandler(event)" mouseOut="mouseOutHandler(event)">
</components:Comment>
</s:Application>
现在，如果您尝试这样做，您将看到此容器中的自定义spark按钮组件不可单击。但是，标准s：按钮组件是可点击的，我不知道为什么。
答案 1 :(得分：0)
如果cobB是conA的孩子，那么我认为将鼠标放在comB上不会触发conA上的mouseout。相同的基本事件逻辑应该仍然有用......
答案 2 :(得分：0)
嗯，我不完全确定我理解你的场景......看到代码可能会有所帮助，但我知道如果你有一个元素上的皮肤，你想要该元素包含另一个元素，皮肤需要有这个：
<s:Group id="contentGroup" depth="25">
<s:layout>
<s:BasicLayout/>
</s:layout>
</s:Group>
对于皮肤来说，contentGroup是一个神奇的ID，它可以让你知道你在皮肤对象中嵌套的所有内容（换句话说，皮肤所应用的东西）都没有被皮肤本身所覆盖。深度是z-index，“contentGroup”组的深度需要高于皮肤中的任何其他深度。希望这会有所帮助。