Как можно разместить элементы списка Flex Абсолютно с помощью ItemRenderer

Question

Я пытаюсь создать сетку элементов, используя компонент List. У меня есть источник данных, который содержит positionX и значение positionY для каждого элемента в сетке. Источник данных также определяет, какой тип элемента имеет каждый элемент в сетке, и я хочу использовать его для отображения каждого элемента по-разному в зависимости от типа.

Я создал фоновый рисунок, например 600px x 600px. Список помещается поверх фонового рисунка и устанавливается равным размеру.

Я создал следующий ItemRenderer и установить его в качестве 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> 

Список продолжает хотеть поместить каждую 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. Используя список, я получаю все события, такие как события мыши, выбранные элементы идентифицируются и т. Д.

Надеюсь, что это поможет.