Flex - Repetidor Componente com a disposição da grade

Question

Eu tenho uma matriz aleatória de tamanho de itens. Eu gostaria de exibir um rótulo para cada item em um componente Repeater. Eu quero que eles para exibir em um layout de grade com 5 colunas e quantas linhas conforme necessário. Como posso fazer isso no Flex / ActionScript?

Talvez haja outra maneira de fazer isso que eu não vi ainda, então qualquer sugestão são apreciados. Obrigado!

Answer 1

Gostaria de usar uma lista de telha em vez de um repetidor. Aqui está um exemplo:

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

Answer 2

um mês tarde demais, mas eu estive na mesma situação em que eu precisava de uma determinada funcionalidade que uma TileList não poderia me dar. ver a minha pergunta aqui

---

Assim, a minha rede repetidor é de 900 pixels de largura. Cada coluna é de 300 pixels de largura e cada linha é de 31 pixels de altura com espaços em branco um pixel no meio. 3 colunas no total.

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

Então, como você lê este código:

a parte prefeito é tratado na tela dentro do repetidor. Como você pode ver cada tela é 300px de largura (largura de cada coluna) e 31px de altura. Ao jogar com o módulo que você pode definir a posição-x do elemento.

digamos que há 6 itens na dataprovider:

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

primeiro item: 0% 3 == posição x: 0 * 300

segundo item: 1% 3 == x-posição: 1 * 300

terceiro item: 2% 3 == x-posição: 2 * 300

produto adiante: 3% 3 == posição x: 0 * 300

Que cuida da posição x-dos elementos. O y-posição dos elementos que eu definidos 32 como um valor constante porque eu quero 1px espaço entre elas. Ao converter o número para um inteiro que você começa valores arredondados (valores em itálico são valores numéricos, FontType normal é o flex inteiro leva em conta)

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

primeiro item: 0/3 == posição y: 0 * 32

segundo item: 1/3 == posição y: 0 * 32 (0.33)

terceiro item: 2/3 == posição y: 0 * 32 (0.66)

produto adiante: 3/3 == y-posição: 1 * 32

quando o repetidor é o produto apresenta a x e y-x = posição: 0 e Y: 32 que está localizado no segundo 'fileira'

---

Desculpe pela resposta bastante grande.