Flex 4 项目渲染器背景颜色 - 状态不起作用
我有一个具有以下状态的项目渲染器:
<s:states>
<s:State name="normal"/>
<s:State name="hovered"/>
<s:State name="selected"/>
</s:states>
我试图在悬停和选择时更改项目的背景颜色。我将以下几行添加到项目渲染器开始标记中:
contentBackgroundColor.hovered="0xff0018"
contentBackgroundColor.selected="0xffff11"
悬停或选择时,除了默认项目渲染器行为(灰色)之外,没有任何反应。如果我说增加图像的宽度:
width.hovered="100"
图像按预期调整大小,我怎样才能达到我想要的效果?
编辑:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer 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:objects="objects.*"
creationComplete="itemrenderer1_creationCompleteHandler(event)"
width="100%" height="100%"
contentBackgroundColor.hover="0xff0018" focusColor="0xff00ff" contentBackgroundAlpha="0.8"
dataChange="refreshView()">
<s:states>
<s:State name="normal"/>
<s:State name="hovered"/>
<s:State name="selected"/>
</s:states>
<fx:Declarations>
<objects:EmbededImages id="embImages"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import events.MyEventDispatcher;
import mx.events.FlexEvent;
private function itemrenderer1_creationCompleteHandler(event:FlexEvent):void
{
//this.parentApplication.MyEventDispatcher.Dispatcher.addEventListener(CastUpdateEvent.UPDATED, refreshView);
refreshView();
}
public function refreshView():void
{
var profileImage:File = File.userDirectory.resolvePath("Movie Manager Settings\\profiles\\" + data.@id + ".jpg");
if(profileImage.exists)
{
personImage.source = profileImage.nativePath as String;
}
else
{
personImage.source = embImages.portrait;
}
}
]]>
</fx:Script>
<s:Image id="personImage" top="7" bottom="7" left="7" height="70" width="50"/>
<s:RichText left="70" height="100%" width="100" text="{data.@name}" textAlign="left" verticalAlign="middle" paddingRight="5"/>
<s:RichText right="10" height="100%" width="100" text="{data.@character}" textAlign="left" verticalAlign="middle"/>
</s:ItemRenderer>
I have an item renderer with the following states:
<s:states>
<s:State name="normal"/>
<s:State name="hovered"/>
<s:State name="selected"/>
</s:states>
I am trying to change background color of the items when hovered and selected. I added the following lines to the Item renderer opening tag:
contentBackgroundColor.hovered="0xff0018"
contentBackgroundColor.selected="0xffff11"
Nothing happens when hovered or selected other than default item renderer behaviour (grey color). If I lets say increase the width of the image within:
width.hovered="100"
The image gets resized as expected, how can I achieve the effect I am looking for?
Edit:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer 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:objects="objects.*"
creationComplete="itemrenderer1_creationCompleteHandler(event)"
width="100%" height="100%"
contentBackgroundColor.hover="0xff0018" focusColor="0xff00ff" contentBackgroundAlpha="0.8"
dataChange="refreshView()">
<s:states>
<s:State name="normal"/>
<s:State name="hovered"/>
<s:State name="selected"/>
</s:states>
<fx:Declarations>
<objects:EmbededImages id="embImages"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import events.MyEventDispatcher;
import mx.events.FlexEvent;
private function itemrenderer1_creationCompleteHandler(event:FlexEvent):void
{
//this.parentApplication.MyEventDispatcher.Dispatcher.addEventListener(CastUpdateEvent.UPDATED, refreshView);
refreshView();
}
public function refreshView():void
{
var profileImage:File = File.userDirectory.resolvePath("Movie Manager Settings\\profiles\\" + data.@id + ".jpg");
if(profileImage.exists)
{
personImage.source = profileImage.nativePath as String;
}
else
{
personImage.source = embImages.portrait;
}
}
]]>
</fx:Script>
<s:Image id="personImage" top="7" bottom="7" left="7" height="70" width="50"/>
<s:RichText left="70" height="100%" width="100" text="{data.@name}" textAlign="left" verticalAlign="middle" paddingRight="5"/>
<s:RichText right="10" height="100%" width="100" text="{data.@character}" textAlign="left" verticalAlign="middle"/>
</s:ItemRenderer>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
将其放入 CSS 中:
Put this in the CSS:
您应该在 css 中使用:
.myItemRendererStyleName:selected #idOflabelInItemRenderer {
内容背景颜色:#ff0000;
}
和 mxml 中:
<代码>
<代码>
You should use in css :
.myItemRendererStyleName:selected #idOflabelInItemRenderer {
contentBackgroundColor:#ff0000;
}
and in mxml :
<s:ItemRenderer styleName="myItemRendererStyleName" .... />
<s:Label id="idOflabelInItemRenderer" includeIn="normal,selected" />
这有效
this works