Flex - Componente repetidor con diseño de cuadrícula

Question

Tengo una matriz de elementos de tamaño aleatorio. Me gustaría mostrar una etiqueta para cada elemento en un componente Repetidor. Quiero que se muestren en un diseño de cuadrícula con 5 columnas y tantas filas como sea necesario. ¿Cómo hago eso en Flex / ActionScript?

Tal vez hay otra forma de hacerlo que aún no he visto, por lo que cualquier sugerencia es apreciada. Gracias!

Answer 1

Usaría una lista de mosaicos en lugar de un repetidor. Aquí hay un ejemplo:

http://blog.flexexamples.com/2007/09/28/using-the-flex-tilelist-classs-new-datachangeeffect-style-in-flex-3/

Answer 2

un mes demasiado tarde, pero he estado en la misma situación en la que necesitaba cierta funcionalidad que una lista de mosaicos no podía proporcionarme. vea mi pregunta aquí

---

Entonces, mi cuadrícula repetidora tiene 900 píxeles de ancho. Cada columna tiene 300 píxeles de ancho y cada fila tiene 31 píxeles de alto con un espacio en blanco de 1 píxel en el medio. 3 columnas en total.

el código:

<mx:Repeater id="rptCities" dataProvider="{citiesArr}">
<mx:Canvas label="{rptCities.currentItem.city}" x="{rptCities.currentIndex%3 * 300}" y="{int(rptCities.currentIndex/3) * 32}" width="300" height="31">
<mx:Label text="{rptCities.currentItem.city}"/>
</mx:Canvas>
</mx:Repeater>

Entonces, ¿cómo se lee este código?

la parte mayor se maneja en el lienzo dentro del repetidor. Como puede ver, cada lienzo tiene 300 px de ancho (ancho de cada columna) y 31 px de alto. Al jugar con el módulo, puede definir la posición x del elemento.

supongamos que hay 6 elementos en el proveedor de datos:

x = " {rptCities.currentIndex% 3 * 300} "

primer elemento: 0% 3 == posición x: 0 * 300

segundo elemento: 1% 3 == posición x: 1 * 300

tercer elemento: 2% 3 == posición x: 2 * 300

cuarto elemento: 3% 3 == posición x: 0 * 300

Eso se encarga de la posición x de los elementos. La posición y de los elementos que he definido 32 como un valor constante porque quiero 1px de espacio en el medio. Al convertir el número en un entero, obtiene valores redondeados (los valores en cursiva son valores numéricos, el tipo de letra normal es el entero que la flexión tiene en cuenta)

y = " {int (rptCities.currentIndex / 3) * 32} "

primer elemento: 0/3 == posición y: 0 * 32

segundo elemento: 1/3 == posición y: 0 * 32 (0.33)

tercer elemento: 2/3 == posición y: 0 * 32 (0.66)

cuarto elemento: 3/3 == posición y: 1 * 32

cuando el repetidor está en el cuarto elemento, la posición x e y = x: 0 e y: 32 que está en la segunda 'fila'

---

Perdón por la respuesta bastante grande.