如何根据模型标志更改自动更新 itemRenderer 状态

Question

我有一个ItemRenderer，其中的数据有一些标志。我需要根据这些标志更改 ItemRenderer 颜色。我怎样才能做到这一点？这是我的 IR：

<?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" 
            autoDrawBackground="false"
            x="{data.x}" y="{data.y}">

<s:states>
    <s:State name="node"/>
    <s:State name="nodeIn"/>
    <s:State name="nodeOut"/>
    <s:State name="nodeTrafficLight"/>
    <s:State name="nodeIntersection"/>
    <s:State name="nodeBlocked"/>
</s:states>

<s:Ellipse width="16" height="16" x="-8" y="-8">
    <s:stroke>
        <s:SolidColorStroke weight="2"
                            color="#FFFF00"
                            color.nodeTrafficLight="#FF00FF"
                            color.nodeIntersection="#FF9900"
                            color.nodeBlocked="#000000"
                            color.nodeIn="#00FF00"
                            color.nodeOut="#FF0000"/>
    </s:stroke>
    <s:fill>
        <s:SolidColor alpha=".5"
                      color="#FFFF00"
                      color.nodeTrafficLight="#FF00FF"
                      color.nodeIntersection="#FF9900"
                      color.nodeBlocked="#000000"
                      color.nodeIn="#00FF00"
                      color.nodeOut="#FF0000"/>
    </s:fill>
</s:Ellipse>

<fx:Script>
    <![CDATA[
        override protected function getCurrentRendererState():String
        {
            if (data.isBlocked)
                return "nodeBlocked";

            if (data.isIn)
                return "nodeIn";

            if (data.isOut)
                return "nodeOut";

            if (data.isIntersection)
                return "nodeIntersection";

            return "node";
        }
    ]]>
</fx:Script>
</s:ItemRenderer>

但是当其中一些标志（例如data.isIn）发生变化时，我不会更新这些状态。我的模型有[Bindable] 标签。

Answer 1

首先；我不认为 x 和 y 值在渲染器内部有影响。列表类将处理渲染器的定位。

也就是说，你的渲染器没有响应 dataChange 事件；因此渲染器不会在数据更改时自行更新。添加 dataChange 事件处理程序：

<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" 
            autoDrawBackground="false"
            dataChange="onDataChange(event)">


<fx:Script>
    <![CDATA[
      protected function onDataChange(event:Event):void{
          invalidateRendererState();
      }
    ]]>
</fx:Script>

invalidateRendererState() 方法应该强制 commitProperties() 重新运行；这将反过来强制执行 getCurrentRendererState()。

如果由于某种原因 onDataChange() 事件在您更改 dataProvider 中的数据时没有触发；您必须使用 dataProvider 上的 itemUpdated() 或 refresh() 函数来“宣布”您更改了数据。