Flex-list: Icons above label fields, centered
I finally managed to make my list render horizontally but the problem is this:
When I run the app I see the list like this:
Don't mind the label fields, the data is gathered from a testing XML
The thing is, I want the list to show the icon above the label field (the iMac image above label 'file1') and The both to be centered.
Here is the list code in my HomeView:
<s:List id="tripList" left="0" right="0" top="0" bottom="0"
change="tripList_changeHandler(event)" dataProvider="{data}" horizontalCenter="0"
labelField="title" verticalCenter="0">
<s:layout>
<s:TileLayout/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:IconItemRenderer iconFunction="getPhotoURL" iconWidth="128" iconHeight="128" height="150" width="379" verticalAlign="top" textAlign="center">
<fx:Script>
<![CDATA[
protected function getPhotoURL(item:Object):String
{
return "images/mine/" + item.image
}
]]>
</fx:Script>
</s:IconIte开发者_运维技巧mRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
Thx for any answer!
something like this...
<s:List id="tripList" left="0" right="0" top="0" bottom="0"
horizontalCenter="0"
labelField="title" verticalCenter="0">
<s:layout>
<s:TileLayout/>
</s:layout>
<s:dataProvider>
<s:ArrayList>
<fx:Object title="item 1" icon="adobe-logo.jpg" />
<fx:Object title="item 2" icon="adobe-logo.jpg" />
<fx:Object title="item 3" icon="adobe-logo.jpg" />
<fx:Object title="item 4" icon="adobe-logo.jpg" />
<fx:Object title="item 5" icon="adobe-logo.jpg" />
<fx:Object title="item 6" icon="adobe-logo.jpg" />
</s:ArrayList>
</s:dataProvider>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:VGroup horizontalAlign="center">
<s:Image source="{data.icon}" />
<s:Label text="{data.title}" />
</s:VGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
精彩评论