Question

我正在创建一个显示Flex新闻列表的移动应用程序。

每条新闻都有标题和图片，因此我使用带有iconItemRenderer的列表来显示结果。似乎itemRenderers总是给所有项目提供相同的外观。

但我想对第一个项目给出不同的外观，全宽图片和更大的标题。我不知道该怎么做。

有什么想法吗？

Answer 1

您应该使用自定义组件并覆盖一些基本方法。所以，我试着这样做，但遇到了一些问题。可能是flex 3中没有修复的问题（我使用flex 3 :-)）。所以，尽管我找到了解决方案。

import mx.controls.List;
import mx.core.IFactory;

public class ListEx extends List{

    public function ListEx(){
        super();
    }

    public var item1stRenderer:IFactory;
    public var item1stCount:int=1;
    private static var _first:int = 0;

    override public function getItemRendererFactory(data:Object):IFactory{
        if(_first<=item1stCount && item1stRenderer != null && data != null){
            return item1stRenderer;
        }else{
            return super.getItemRendererFactory(data);
        }
    }

    override public function get itemRenderer():IFactory{
        if(_first<=item1stCount && item1stRenderer != null){
            _first++;
            return item1stRenderer;
        }else{
            return super.itemRenderer;
        }           
    }       
}

让我们测试一下吧！

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="100%" width="100%" xmlns:local="*">

    <mx:Model id="mystates">
        <states>
            <state label="Alabama" data="AL"/>
            <state label="Alaska" data="AK"/>
            <state label="Arizona" data="AZ"/>
            <state label="Arkansas" data="AR"/>
            <state label="California" data="CA"/>
            <state label="Colorado" data="CO"/>
            <state label="Connecticut" data="CT"/>
        </states>
    </mx:Model>

    <local:ListEx itemRenderer="mx.controls.TextInput" id="g_list" dataProvider="{mystates.state}" width="100%">
        <local:item1stRenderer>
            <mx:Component>
                <mx:Label color="blue"/>
            </mx:Component>
        </local:item1stRenderer>
    </local:ListEx>

</mx:Application>

希望，我可以帮助你。

PS：对不起我的英语，我是俄语：）

Flex List：与第一项不同的外观

1 个答案: