Звездный рейтинг

[Astraport]

Требуется в List вывести итемы и для каждого вывести звездочки в зависимости от рейтинга.
Делаю так. Компонент звезды с тремя состояниями - полная, половина, пустая звезда.

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
		 xmlns:s="library://ns.adobe.com/flex/spark"
		 xmlns:mx="library://ns.adobe.com/flex/mx"
		 width="24" height="25">
	<s:states>
		<s:State name="full"/>
		<s:State name="half"/>
		<s:State name="empty"/>
	</s:states>
	<s:Image left="0" top="0" source.empty="@Embed('images/stars_empty.png')" source.full="@Embed('images/stars_full.png')" source.half="@Embed('images/stars_half.png')"/>
</s:Group>

Сам рендерер (там в нем много всего, лишнее убрал):

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
				xmlns:s="library://ns.adobe.com/flex/spark"
				width="100%" 
				creationComplete="itemrenderer1_creationCompleteHandler(event)">
 
	<fx:Script>
		<![CDATA[
			import components.Star;
 
			override public function set data(value:Object):void {      
				if(value != null)  {
					super.data = value;
					//buildStars(Number(value.rating));
				}   
				dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
			}
			protected function buildStars (rating:Number):void
			{
				trace ('rating ' + rating);
				for (var i:int = 0; i < 5; i++){
					var star:Star = new Star();
					if (i < rating){
						star.currentState = 'full';
					} else if (i > rating) {
						star.currentState = 'empty';
					} else {
						star.currentState = 'half';
					}
					stars.addElement(star);
				}
			}
 
			protected function itemrenderer1_creationCompleteHandler(event:FlexEvent):void
			{
				for (var i:int = 0; i < 5; i++){
					var star:Star = new Star();
					if (i < data.rating){
						star.currentState = 'full';
					} else if (i > data.rating) {
						star.currentState = 'empty';
					} else {
						star.currentState = 'half';
					}
					stars.addElement(star);
				}
			}
		]]>
	</fx:Script>
	<s:HGroup id="stars" width="100%" height="100%" gap="3" verticalAlign="middle"/>
</s:ItemRenderer>

В рендерер приходит значение rating, которое может быть не целым в диапазоне от 0 до 5.
Если я строю звезды как buildStars(Number(value.rating)); то при прокрутке листа звезды добавляются до бесконечности. Если строю через itemrenderer1_creationCompleteHandler, то звезд как положено пять, но их значение при прокрутке постоянно меняется.

Когда-то с подобным успешно боролся, но сейчас не могу вспомнить как именно.

Ну и нужен совет, как все же правильно менять состояния звезд чтобы выводить половинку звезды, если рейтинг будет допустим 3,84.

Добавлено через 5 минут
Можно конечно при каждом вызове buildStars (rating:Number) удалять все элементы из группы stars, но мне кажется это плохой, ресурсоемкий вариант, т. к. для мобил.

Добавлено через 23 минуты
Нашел похожий пример http://www.switchonthecode.com/tutor...item-renderers
Так что все нормально, но и там удаление/создание при каждом скроллинге - не хорошо.

[alatar]

Сделайте пять звезд сразу (в createChildren, например или в mxml) и меняйте только их состояние (Я бы вообще сделал компонент типа progressBar с маской в виде звезд).

В рендерер приходит значение rating, которое может быть не целым в диапазоне от 0 до 5.

У вас уже есть data, передавайте значение в нем, как было первоначально.

Если я строю звезды как buildStars(Number(value.rating)); то при прокрутке листа звезды добавляются до бесконечности.

Ну так вы же их не удаляете, а только добавляете.

Если строю через itemrenderer1_creationCompleteHandler, то звезд как положено пять, но их значение при прокрутке постоянно меняется.

Там может еще находиться data от предыдущего (тот для которого этот рендерер использовался ранее) элемента.

[Astraport]

alatar, спасибо. Про прогрессбар тоже думал, тут дело вкуса. Мне больше нравится видеть пол-звезды, чем какую-то непонятную её долю.

[alatar]

Можно округлять при отрисовке.