У меня есть случайный размер элементов. Я хотел бы отобразить одну метку для каждого элемента в компоненте Repeater. Я хочу, чтобы они отображались в виде сетки с 5 столбцами и количеством строк по мере необходимости. Как это сделать в Flex/ActionScript?Flex - Repeater Component with Grid Layout
Возможно, есть еще один способ сделать это, что я еще не видел, поэтому любое предложение оценивается. Благодаря!
Я бы использовал список плиток вместо ретранслятора. Вот пример:
месяц слишком поздно, но я был в той же ситуации, когда мне нужна определенная функциональность, что TileList не мог дать мне. see my question here
Таким образом, мой ретранслятор сетки составляет 900 пикселей в ширину. Каждый столбец имеет ширину 300 пикселей, а каждая строка имеет высоту 31 пиксель с промежутком в 1 пиксель. Всего 3 столбца.
код:
<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>
так, как вы читаете этот код:
мэр часть обрабатывается на холсте в ретранслятора. Как вы можете видеть, каждый холст имеет ширину 300 пикселей (ширина каждого столбца) и высоту 31 пиксель. Играя по модулю, вы можете определить x-позицию элемента.
допустим есть 6 элементов в DataProvider:
х = "{rptCities.currentIndex% 3 * 300}"
первый элемент: 0% 3 == х-х позиционный: 0 * 300
второй пункт: 1% 3 == х-позиций: 1 * 300
третий пункт: 2% 3 == х-положение: 2 * 300
вперед деталь : 3% 3 == x-position: 0 * 300
Это касается положения элементов x. Y-позиция элементов, которые я определил 32 как постоянное значение, потому что я хочу 1px промежуток между ними. Преобразуя число в целое число, вы получаете округленные значения (значения в курсиве - это числовые значения, нормальный тип шрифта - целочисленный flex учитывается)
y = "{int (rptCities.currentIndex/3) * 32}"
первый элемент: 0/3 == у-позиции: 0 * 32
второй элемент: 1/3 == у-позиции: 0 * 32 (0,33)
третий пункт: 2/3 == y-position: 0 * 32 (0.66)
вперед элемент: 3/3 == у-позиция: 1 * 32
, когда повторитель на четвертом х- и у-положение = х: 0 и у: 32, который является по второму «ряду»
Извините за довольно большой ответ.
Amen. Научитесь любить dataProviders и itemRenderers! –
Я НЕ ЛЮБЛЮ это решение, но за то, что я делаю, это сработает. Благодаря! Все еще любопытно, знает ли кто-нибудь другой способ сделать это? – davidemm
не уверен, что нельзя «любить»? вам не хватает функциональности в вышеупомянутом решении, которое вам нужно? – Shua