Question

我正在尝试使用List组件创建项目网格。我有一个数据源，其中包含网格中每个项目的positionX和positionY值。数据源还标识网格中每个项目的项目类型，我想使用它来根据类型不同地显示每个项目。

我创建了一个背景图形，例如600px x 600px。列表放在背景图形的顶部，并设置为相同的大小。

我创建了以下ItemRenderer并将其设置为List的itemRenderer：

<s:ItemRenderer
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    autoDrawBackground="true"
    useHandCursor="true"
    buttonMode="true"
    mouseChildren="false"
    width="100%" height="100%">

<!-- Use the data property to access the data passed to the item renderer. -->
<s:Group
      id="locationGroup"
      x="{data.positionX}" y="{data.positionY}"
      width="23.058" height="23.058">

<s:RichText
        text="{data.rowIdent}, {data.columnIdent}"
        styleName="bodyStyle"/>

</s:Group>


</s:ItemRenderer>

List继续想要将每个listItem放在行中。任何人都可以建议我如何让每个listItem根据它的数据源属性自由定位？

由于

Answer 1

我创建了一个简单但有效的ItemRenderer来实现我的目标，我想分享它。这是代码：

<s:ItemRenderer
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    autoDrawBackground="true"
    useHandCursor="true"
    buttonMode="true"
    mouseChildren="false"
    width="23.058" height="23.058">

<fx:Script>
<![CDATA[
    import mx.collections.ArrayCollection;
    import vo.VoLocation;

    override public function set data( value:Object ) : void {
        super.data = value;

        // Check to see if the data property is null.
        if (value== null)
            return;

        // If the data property is not null.
        var _location:Array = value as Array; // Cast the 'value' to an Array data type.
        this.x = _location[1];
        this.y = _location[2];
        detailsRichText.text = _location[1];
    }
    ]]>
</fx:Script>

<!-- Use the data property to access the data passed to the item renderer. -->
<!-- Each Tile is 23.058px -->

<s:Group
        id="locationGroup">

    <s:Rect width="100%" height="100%">
        <s:fill>
          <s:SolidColor color="0xf0ffff" />
        </s:fill>
    </s:Rect>

    <s:RichText
            id="detailsRichText"
            fontSize="4"/>

</s:Group>
</s:ItemRenderer>

那么为什么要使用列表呢？好吧，我曾经有一个类似的场景，使用WPF，我使用了一个List，它起了作用。如上所示，我的数据源中的每个项目都表示为单独的ItemRenderer对象，每个项目使用positionX和positionY值定位。通过使用List，我可以获得所有事件，例如鼠标事件，识别所选项目等。

希望它有所帮助。

如何使用ItemRenderer

1 个答案: