Flex - Repeater-Komponente mit Raster-Layout

Question

Ich habe eine zufällig großen Array von Elementen. Ich mag für jedes Element in einer Repeater-Komponente ein Etikett angezeigt werden soll. Ich mag, dass sie mit 5 Spalten in einem Raster-Layout angezeigt werden und so viele Zeilen wie nötig. Wie mache ich das in Flex / Actionscript?

Vielleicht ist es eine andere Möglichkeit, es zu tun, dass ich noch nicht gesehen haben, so ist jede Anregung dankbar. Dank!

Answer 1

Ich würde eine Kachel Liste anstelle eines Repeaters. Hier ein Beispiel:

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

Answer 2

ein Monat zu spät, aber ich habe in der gleichen Situation gewesen, wo ich bestimmte Funktionen benötigt, die eine TileList nicht mir geben konnte. sehen meine Frage hier

---

Also mein Repeater Raster ist 900 Pixel breit. Jede Spalte ist 300 Pixel breit und jede Zeile ist 31 Pixel hoch mit 1 Pixel Leerzeichen dazwischen. 3 Spalten insgesamt.

Sie den Code ein:

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

so wie lesen Sie diesen Code ein:

der Bürgermeister Teil in der Leinwand in dem Repeater behandelt. Wie Sie jede Leinwand sehen kann, ist 300px breit (Breite jeder Spalte) und 31px hoch. Durch das Spiel mit dem Modulo können Sie die x-Position des Elements definieren.

Lassen Sie uns sagen, es gibt sechs Elemente in der Dataprovider:

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

erste Artikel: 0% 3 == x-Position: 0 * 300

zweiter Punkt: 1% 3 == x-Position: 1 * 300

dritter Punkt: 2% 3 == x-Position: 2 * 300

weiter Artikel: 3% 3 == x-Position: 0 * 300

Das kümmert sich um die x-Position der Elemente. Die y-Position der Elemente I 32 als konstanter Wert definiert habe, weil ich 1px Raum will dazwischen. Durch die Umwandlung der Zahl auf eine ganze Zahl gerundet Sie Werte erhalten (Werte in kursiv sind Zahlenwerte, normal Fonttype ist die ganze Zahl flex berücksichtigt)

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

erstes Element: 0/3 == y-Position: 0 * 32

zweiter Punkt: 1/3 == y-Position: 0 * 32 (0,33)

drittes Element: 2/3 == y-Position: 0 * 32 (0,66)

her Artikel: 3/3 == y-Position: 1 * 32

, wenn der Repeater ist an dem vierten Punkt die x- und y-Position = x: 0 und y: 32, die auf der zweite 'Reihe' ist,

---

Sorry für die ziemlich große Antwort.