Displaying icons in a Flex List control

The following example demonstrates how to use embedded images in a List control so that each item in the list displays a little icon based on a certain property in the data provider. You’ll also notice that we set the <code>textIndent</code> style to give the label a bit more padding from the icon. Finally, we create three non-interactive Button controls beneath the list as a sort of “legend” for the icons

&lt;?xml version="1.0" encoding="utf-8"?&gt;

&lt;!-- http://blog.flexexamples.com/2007/08/17/displaying-icons-in-a-flex-list-control/ --&gt;

&lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

        layout="vertical"

        verticalAlign="middle"

        backgroundColor="white"&gt;

    &lt;mx:Script&gt;

        &lt;![CDATA[

            [Bindable]

            [Embed(source="assets/bulletCheck.png")]

            public var BulletCheck:Class;

            [Embed(source="assets/bulletWarning.png")]

            public var BulletWarning:Class;

            [Embed(source="assets/bulletCritical.png")]

            public var BulletCritical:Class;

        ]]&gt;

    &lt;/mx:Script&gt;

    &lt;mx:List id="list"

            labelField="label"

            iconField="icon"

            rowCount="4"

            width="200"

            themeColor="haloSilver"

            textIndent="5"&gt;

        &lt;mx:dataProvider&gt;

            &lt;mx:Array&gt;

                &lt;mx:Object label="Item 1" icon="BulletWarning" /&gt;

                &lt;mx:Object label="Item 2" icon="BulletCritical" /&gt;

                &lt;mx:Object label="Item 3" icon="BulletCritical" /&gt;

                &lt;mx:Object label="Item 4" icon="BulletCheck" /&gt;

                &lt;mx:Object label="Item 5" icon="BulletWarning" /&gt;

                &lt;mx:Object label="Item 6" icon="BulletCheck" /&gt;

                &lt;mx:Object label="Item 7" icon="BulletCheck" /&gt;

                &lt;mx:Object label="Item 8" icon="BulletCritical" /&gt;

            &lt;/mx:Array&gt;

        &lt;/mx:dataProvider&gt;

    &lt;/mx:List&gt;

    &lt;mx:HBox&gt;

        &lt;mx:Button label="Success"

                icon="{BulletCheck}"

                mouseEnabled="false"

                skin="{null}" /&gt;

        &lt;mx:Button label="Warning"

                icon="{BulletWarning}"

        &lt;mx:Button label="Critical"

                icon="{BulletCritical}"

    &lt;/mx:HBox&gt;

&lt;/mx:Application&gt;

You can also add icons to a List control using the <code>iconFunction</code> property, as seen in the following example. Note that the list’s data provider doesn’t contain a column with the name of the specific icon to use, the icon is being determined by a user-defined function which calculates the icon from the “data” property in data provider.

            private function list_iconFunc(item:Object):Class {

                var iconClass:Class;

                if (item.data &gt;= 8) {

                    iconClass = BulletCheck;

                } else if (item.data &gt;= 5) {

                    iconClass = BulletWarning;

                } else {

                    iconClass = BulletCritical;

                }

                return iconClass;

            }

            iconFunction="list_iconFunc"

                &lt;mx:Object label="Item 1" data="7" /&gt;

                &lt;mx:Object label="Item 2" data="3" /&gt;

                &lt;mx:Object label="Item 3" data="1" /&gt;

                &lt;mx:Object label="Item 4" data="8" /&gt;

                &lt;mx:Object label="Item 5" data="5" /&gt;

                &lt;mx:Object label="Item 6" data="8" /&gt;

                &lt;mx:Object label="Item 7" data="9" /&gt;

                &lt;mx:Object label="Item 8" data="2" /&gt;

    本文转自 OldHawk  博客园博客，原文链接：http://www.cnblogs.com/taobataoma/archive/2008/01/11/1035784.html，如需转载请自行联系原作者