开发者

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:

Flex-list: Icons above label fields, centered

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜