Flex - Composant Répéteur avec disposition en grille

Question

J'ai un tableau d'éléments de taille aléatoire. J'aimerais afficher une étiquette pour chaque élément d'un composant Répéteur. Je veux qu'ils s'affichent dans une grille comportant 5 colonnes et autant de lignes que nécessaire. Comment faire cela dans Flex / ActionScript?

Peut-être y a-t-il une autre façon de le faire que je n'ai pas encore vue, alors toute suggestion est appréciée. Merci!

Answer 1

J'utiliserais une liste de mosaïques au lieu d'un répéteur. Voici un exemple:

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

Answer 2

un mois trop tard, mais je me trouvais dans la même situation où j'avais besoin de certaines fonctionnalités qu'une liste de notes ne pouvait me fournir. Voir ma question ici

Donc, ma grille de répéteur a une largeur de 900 pixels. Chaque colonne mesure 300 pixels de large et chaque rangée mesure 31 pixels de haut avec un espace de 1 pixel entre eux. 3 colonnes au total.

le code:

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

alors comment lisez-vous ce code:

la partie maire est gérée dans le canevas du répéteur. Comme vous pouvez le constater, chaque toile a une largeur de 300 pixels (largeur de chaque colonne) et une hauteur de 31 pixels. En jouant avec le modulo, vous pouvez définir la position x de l'élément.

Disons qu'il y a 6 éléments dans le fournisseur de données:

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

premier élément: 0% 3 == position x: 0 * 300

deuxième élément: 1% 3 == position x: 1 * 300

troisième élément: 2% 3 == position x: 2 * 300

quatrième élément: 3% 3 == position x: 0 * 300

Cela prend en charge la position x des éléments. La position y des éléments que j'ai définis 32 comme une valeur constante parce que je veux un espace 1px entre les deux. En convertissant le nombre en un entier, vous obtenez des valeurs arrondies (les valeurs en italique sont des valeurs numériques, le type de police normal est le nombre entier pris en compte par flex)

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

premier élément: 0/3 == position y: 0 * 32

deuxième élément: 1/3 == position y: 0 * 32 (0,33)

troisième élément: 2/3 == position y: 0 * 32 (0.66)

quatrième élément: 3/3 == position y: 1 * 32

lorsque le répéteur est au quatrième élément, les positions x et y = x: 0 et y: 32, qui se trouvent sur la deuxième "ligne"

Désolé pour la réponse plutôt large.