Flex-list:标签字段上方的图标,居中

时间:2011-08-09 19:27:17

标签: flex list

我终于设法让我的列表水平渲染,但问题是:

当我运行应用程序时,我会看到如下列表:My list view (iPad)

不介意标签字段,数据是从测试XML收集的

问题是,我希望列表显示标签字段上方的图标(标签'file1'上方的iMac图像)和两者都居中。

以下是我的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:IconItemRenderer>
        </fx:Component>
    </s:itemRenderer>
</s:List>

任何答案的答案!

1 个答案:

答案 0 :(得分:2)

像这样......

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