Flex - Componente ripetitore con layout a griglia

Question

Ho un array di oggetti di dimensioni casuali. Vorrei visualizzare un'etichetta per ciascun elemento in un componente Repeater. Voglio che vengano visualizzati in un layout a griglia con 5 colonne e tutte le righe necessarie. Come posso farlo in Flex / ActionScript?

Forse c'è un altro modo di farlo che non ho ancora visto, quindi ogni suggerimento è apprezzato. Grazie!

Answer 1

Vorrei usare un elenco di tessere anziché un ripetitore. Ecco un esempio:

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

Answer 2

un mese troppo tardi, ma mi sono trovato nella stessa situazione in cui avevo bisogno di alcune funzionalità che un elenco di assistenza non poteva darmi. vedi la mia domanda qui

---

Quindi la mia griglia del ripetitore è larga 900 pixel. Ogni colonna ha una larghezza di 300 px e ogni riga è alta 31 pixel con uno spazio bianco di 1 pixel in mezzo. 3 colonne in totale.

il codice:

<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>

quindi come leggi questo codice:

la parte del sindaco è gestita nell'area di disegno all'interno del ripetitore. Come puoi vedere, ogni tela è larga 300 pixel (larghezza di ogni colonna) e alta 31 pixel. Giocando con il modulo è possibile definire la posizione x dell'elemento.

supponiamo che ci siano 6 elementi nel dataprovider:

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

primo elemento: 0% 3 == posizione x: 0 * 300

secondo elemento: 1% 3 == posizione x: 1 * 300

terzo elemento: 2% 3 == posizione x: 2 * 300

quarto elemento: 3% 3 == posizione x: 0 * 300

Questo si occupa della posizione x degli elementi. La posizione y degli elementi che ho definito 32 come valore costante perché voglio 1px di spazio in mezzo. Convertendo il numero in un numero intero si ottengono valori arrotondati (i valori in corsivo sono valori numerici, il tipo di carattere normale è il numero intero che tiene conto)

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

primo elemento: 0/3 == posizione y: 0 * 32

secondo elemento: 1/3 == posizione y: 0 * 32 (0,33)

terzo elemento: 2/3 == posizione y: 0 * 32 (0.66)

quarto elemento: 3/3 == posizione y: 1 * 32

quando il ripetitore si trova sul quarto elemento la posizione xe y = x: 0 e y: 32 che si trova sulla seconda "riga"

---

Ci scusiamo per la risposta piuttosto ampia.