Flex - Repeater-Komponente mit Raster-Layout
-
11-07-2019 - |
Frage
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!
Lösung
Ich würde eine Kachel Liste anstelle eines Repeaters. Hier ein Beispiel:
Andere Tipps
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.