flex手机 List多列显示

一、通过iconField和labelField实现多行显示

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    creationComplete="initApp()" width="289" height="254">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;//引入集合类ArrayCollection
            [Embed(source="./1.gif")]
            private var citySymbol:Class;
            private function initApp():void{//程序创建完成后调用initApp方法进行初始化
                var cityArr=[
                    {cityIcon:citySymbol,city:"北京",ballot:"12.9"},
                    {cityIcon:citySymbol,city:"上海",ballot:"12.9"},
                    {cityIcon:citySymbol,city:"深圳",ballot:"12.9"},
                    {cityIcon:citySymbol,city:"广州",ballot:"12.9"},
                    {cityIcon:citySymbol,city:"武汉",ballot:"12.9"}
                ];
                cityList.dataProvider=cityArr;
            }
            private function city_select():void{
                cityLabel.text="你选择了："+cityList.selectedItem.city;
            }
        ]]>
    </mx:Script>
    <mx:List x="83" y="31" height="147" width="123" fontSize="14" id="cityList" labelField="city" iconField="cityIcon" click="city_select()">
    </mx:List>
    <mx:Label x="83" y="203" text="请选择" width="123" height="31" fontSize="16" id="cityLabel" textAlign="center"/>
</mx:Application>

源地址

 

 

二、通过内联itemRenderer显示数据

itemRenderer：列表控件提供了一种使用 itemRenderer 对其内容进行自定的方式，通过itemRenderer你可以自己定义列表中数据的显示方式。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    creationComplete="initApp()" width="289" height="254">
    <mx:Script>
        <![CDATA[
            [Embed(source="./1.gif")]
            private var citySymbol:Class;
            [Embed(source="./2.gif")]
            private var citySymbol2:Class;
            [Embed(source="./3.gif")]
            private var citySymbol3:Class;
            [Embed(source="./4.gif")]
            private var citySymbol4:Class;
            [Embed(source="./5.gif")]
            private var citySymbol5:Class;

            private function initApp():void{//程序创建完成后调用initApp方法进行初始化
                var cityArr=[
                    {img:citySymbol,city:"北京",ballot:"12.9"},
                    {img:citySymbol2,city:"上海",ballot:"12.9"},
                    {img:citySymbol3,city:"深圳",ballot:"12.9"},
                    {img:citySymbol4,city:"广州",ballot:"12.9"},
                    {img:citySymbol5,city:"武汉",ballot:"12.9"}
                ];
                cityList.dataProvider=cityArr;
            }
            private function city_select():void{
                cityLabel.text="你选择了："+cityList.selectedItem.city;
            }
        ]]>
    </mx:Script>
    <mx:List x="64" y="10" height="168" width="172" fontSize="14" id="cityList" click="city_select()">
        <mx:itemRenderer>
            <mx:Component>
                <mx:HBox>
                    <mx:Image source="{data.img}"/>
                    <mx:Label text="{data.city}:{data.ballot}"/>    
                </mx:HBox>
            </mx:Component>
        </mx:itemRenderer>
    </mx:List>
    <mx:Label x="83" y="203" text="请选择" width="123" height="31" fontSize="16" id="cityLabel" textAlign="center"/>
</mx:Application>

本例中的<mx:itemRenderer>用到了 <mx:Component>这个标记在这里是必须, 它会告诉 Flex 编译器你正在定义一个组件内联。

<mx:Image source="{data.img}"/>
<mx:Label text="{data.city}:{data.ballot}"/>这两个元素必须放在一个容器里面，否则会报错Parse error

http://www.beijibear.com/index.php?aid=112

上面的代码虽然是实现网页的 但开发手机的话需要改动的地方也不多