Flex 4 项目渲染器背景颜色 - 状态不起作用

发布于 2024-12-14 07:48:44 字数 2698 浏览 7 评论 0原文

我有一个具有以下状态的项目渲染器:

<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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

水水月牙 2024-12-21 07:48:44

将其放入 CSS 中:

s|ItemRenderer:hovered {
 contentBackgroundColor: #ff0018;
}

Put this in the CSS:

s|ItemRenderer:hovered {
 contentBackgroundColor: #ff0018;
}
七色彩虹 2024-12-21 07:48:44

您应该在 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" />

浪推晚风 2024-12-21 07:48:44

这有效

<s:GridItemRenderer currentState="normal" >
<fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;

        protected function state1_enterStateHandler(event:FlexEvent):void{
            bc.setStyle("backgroundColor",0xff0018);
        }

    ]]>
</fx:Script>
<s:states>
    <s:State name="normal"/>
    <s:State enterState="state1_enterStateHandler(event)" name="myState"/>
    <s:State name="selected"/>
</s:states>

<s:BorderContainer id="bc" left="0" right="0" height="{this.height}"/>
<s:Button click="this.currentState = 'prova'"/>

this works

<s:GridItemRenderer currentState="normal" >
<fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;

        protected function state1_enterStateHandler(event:FlexEvent):void{
            bc.setStyle("backgroundColor",0xff0018);
        }

    ]]>
</fx:Script>
<s:states>
    <s:State name="normal"/>
    <s:State enterState="state1_enterStateHandler(event)" name="myState"/>
    <s:State name="selected"/>
</s:states>

<s:BorderContainer id="bc" left="0" right="0" height="{this.height}"/>
<s:Button click="this.currentState = 'prova'"/>

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文