Flex 按钮皮肤恢复默认设置
Posted
技术标签:
【中文标题】Flex 按钮皮肤恢复默认设置【英文标题】:Flex button skins return to default 【发布时间】:2011-10-31 00:35:29 【问题描述】:我有一个问题,涉及在我的应用程序中发生某些操作后皮肤按钮返回到其默认皮肤。下面我提供了部分屏幕截图,您可以在其中观察问题。
左键在被点击后返回到它的默认外观(点击触发状态转换)。右键是默认的蒙皮按钮。请注意,我的鼠标既没有悬停也没有按下左键。
Button Skin的代码如下:
<?xml version="1.0" encoding="utf-8"?>
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
import spark.components.Group;
static private const exclusions:Array = ["labelDisplay"];
override public function get colorizeExclusions():Array return exclusions;
override protected function initializationComplete():void
useChromeColor = true;
super.initializationComplete();
]]>
</fx:Script>
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
<s:fill>
<s:LinearGradient rotation="270">
<s:GradientEntry color.down="#545454"
color.over="#444444"
color="#343434"
alpha="0.95"/>
<s:GradientEntry color.down="#767676"
color.over="#666666"
color="#565656"
alpha="0.95"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Rect id="border" left="0" right="0" top="0" bottom="0" radiusX="3">
<s:stroke>
<s:SolidColorStroke id="borderStroke" weight="1" color="#343434" caps="round" joints="round" />
</s:stroke>
</s:Rect>
<s:Label id="labelDisplay"
textAlign="center" verticalAlign="middle" maxDisplayedLines="1" fontSize="12"
left="10" right="10" verticalCenter="0"
color="#FFFFFF" fontFamily="SegoeUI">
</s:Label>
这是导致问题的转换代码:
<s:Transition fromState="State0" toState="State1">
<s:Sequence targets="[contacts_nocontacts, contacts_list, button_contacts, button_add, button_delete, ac_vgroup]">
<s:Parallel>
<s:Fade target="contacts_nocontacts" alphaFrom="1" alphaTo="0" duration="200" />
<s:Fade target="contacts_list" alphaFrom="1" alphaTo="0" duration="200" />
<s:Fade target="button_add" alphaFrom="1" alphaTo="0" duration="200" />
<s:Fade target="button_delete" alphaFrom="1" alphaTo="0" duration="200" />
</s:Parallel>
<s:RemoveAction targets="[contacts_nocontacts, contacts_list, button_add, button_delete]" />
<s:AddAction targets="[button_contacts, ac_vgroup]" />
<s:Parallel>
<s:Fade target="button_contacts" alphaFrom="0" alphaTo="1" duration="300" />
<s:Fade target="ac_vgroup" alphaFrom="0" alphaTo="1" duration="300" />
</s:Parallel>
</s:Sequence>
</s:Transition>
【问题讨论】:
Ctrl+HsetStyle("skinClass"
也许?
我不明白你想说什么,请改写。
我不清楚这个问题。您是否试图将按钮返回到它的默认皮肤类?或者你想阻止它发生吗?你是如何创建按钮的?你是如何设置皮肤的?您的自定义皮肤背后的代码是什么?您使用的是哪种过渡方式?
我试图阻止它发生。按钮是使用 MXML 创建的,皮肤是通过 CSS 全局应用的。我已将皮肤代码添加到问题中。转换是按钮容器上的简单 MXML Spark Fade 转换。上面(左)的按钮用于触发转换。
该皮肤没有任何问题(尽管如果您不在任何地方使用它,我看不出您为什么将“useChromeColor”设置为“true”),因此错误肯定在其他地方。一定有什么东西在重新分配那个按钮的皮肤类。
【参考方案1】:
看起来皮肤被设置为 spark.skins.spark.DefaultButtonSkin(不要与正常的 Button 皮肤 - spark.skins.spark.ButtonSkin 混淆)。当您在按钮上设置强调=“真”或该按钮被用作表单中的默认按钮时,会发生这种情况。
有关如何自定义强调皮肤的示例,请参阅此线程:http://forums.adobe.com/message/3811868
【讨论】:
【参考方案2】:问题是当焦点丢失在设置为Default button
的按钮上时,皮肤会重置。这是标准行为,可以在下面找到快速修复(这与 Steven 指出的解决方案相同,但在此实际页面上更容易)
s|Button.emphasized
skinClass: ClassReference("MyNewButtonSkin");
只需在按钮的 emphasized
样式属性上附加相同的按钮 skinClass。最快的最好方法是使用上面的 CSS。通过这种方式,您可以一次定位所有按钮!
【讨论】:
以上是关于Flex 按钮皮肤恢复默认设置的主要内容,如果未能解决你的问题,请参考以下文章