如何扩展列表以添加 UI 组件？

Question

如何扩展 Spark 列表以在其上添加 UI 组件？

Answer 1

我假设您想要向列表本身内的项目添加 UI 组件，在这种情况下您可以使用 itemRenderers。有 几个 好 示例就在那里。

我从 Flex 示例（很棒的网站）如下。

MyApplication.mxml：

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/01/27/creating-a-fancy-spark-list-control-item-renderer-in-flex-4/ -->
<s:Application name="Spark_List_itemRenderer_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:local="*">

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";

        s|List {
            chromeColor: #333333;
            color: white;
            contentBackgroundColor: black;
            fontSize: 24;
        }
    </fx:Style>

    <s:List id="list"
            itemRenderer="CustomListItemRenderer"
            labelField="name"
            width="400"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout horizontalAlign="justify" gap="0" requestedRowCount="6" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <local:ProductVO name="Adobe Illustrator CS5" icon="@Embed('ai_appicon-tn.gif')" />
                <local:ProductVO name="Adobe AIR 2.0" icon="@Embed('air_appicon-tn.gif')" />
                <local:ProductVO name="ColdFusion 9" icon="@Embed('cf_appicon-tn.gif')" />
                <local:ProductVO name="Dreamweaver CS5" icon="@Embed('dw_appicon-tn.gif')" />
                <local:ProductVO name="Flash Professional CS5" icon="@Embed('fl_appicon-tn.gif')" />
                <local:ProductVO name="Adobe Flash Player 10.1" icon="@Embed('fl_player_appicon-tn.gif')" />
                <local:ProductVO name="Fireworks CS5" icon="@Embed('fw_appicon-tn.gif')" />
                <local:ProductVO name="Flex 4.0" icon="@Embed('fx_appicon-tn.gif')" />
                <local:ProductVO name="Lightroom 2.0" icon="@Embed('lr_appicon-tn.gif')" />
                <local:ProductVO name="Photoshop CS5" icon="@Embed('ps_appicon-tn.gif')" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>

</s:Application>

CustomListItemRenderer.mxml：

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/01/27/creating-a-fancy-spark-list-control-item-renderer-in-flex-4/ -->
<s:ItemRenderer name="CustomListItemRenderer"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        autoDrawBackground="false">
    <s:layout>
        <s:HorizontalLayout verticalAlign="middle"
                paddingLeft="5" paddingRight="5"
                paddingTop="5" paddingBottom="5" />
    </s:layout>
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
    </s:states>

    <s:BitmapImage source="{data.icon}" />
    <s:Label text="{data.name}"
            textDecoration.hovered="underline"
            paddingLeft.selected="5"
            width="100%"
            maxDisplayedLines="1"
            showTruncationTip="true" />
    <s:Label text="»"
            scaleX="2" scaleY="2" />

</s:ItemRenderer>

最后是ProductVO.as：

/** http://blog.flexexamples.com/2010/01/27/creating-a-fancy-spark-list-control-item-renderer-in-flex-4/ */
package {
    public class ProductVO extends Object {

        [Bindable]
        public var name:String;

        [Bindable]
        public var icon:Class;
    }
}