Flex Spark DropDownList - 在项目之间添加分隔符

Question

我正在尝试创建一个下拉列表，可以显示客户的过去状态和可能状态。

但我想在过去和可能的状态之间添加一个分隔符。

实际上，为了做到这一点，我在数据提供者上添加了一个类似“-----”的项目。

但外观和感觉不好，可以选择此项目。

我理想的方法是这样的：

那么如何做得更好？

任何建议将不胜感激！

Answer 1

我能想到的唯一方法是为 DropDownList 创建自定义外观。

我从未为该组件设计过皮肤，所以我无法向您提供更多详细信息，但如果您使用 Flash Builder，则为组件创建新皮肤非常容易：只需单击“”右侧的带有画笔和齿轮的图标即可皮肤”选择器并选择创建皮肤。然后，您可以自定义有关组件外观的所有内容。

Answer 2

我会使用自定义 ItemRenderer。在最后一个项目上，您可以隐藏该线。但是，使用此代码，您将收到一条数据绑定警告，表明所有者不可绑定。

<s:itemRenderer>
    <fx:Component>
        <s:ItemRenderer width="100%" height="100%" 
                        autoDrawBackground="true">
            <fx:Script>
                <![CDATA[
                    import spark.components.supportClasses.ListBase;
                ]]>
            </fx:Script>
            <s:states>
                <s:State name="normal"/>
                <s:State name="down"/>
                <s:State name="hovered"/>
                <s:State name="selected"/>
                <s:State name="dragging"/>
                <s:State name="normalAndShowCaret"/>
                <s:State name="hoveredAndShowCaret"/>
                <s:State name="selectedAndShowCaret"/>
            </s:states>


            <s:Line width="100%" top="2" visible="{itemIndex==outerDocument.lengthOfFirstItems-1}">
                <s:stroke>
                    <s:SolidColorStroke weight="1" caps="square"/>
                </s:stroke>
            </s:Line>

            <s:Group top="8" left="2" right="2" bottom="2" width="100%" height="100%">
                <s:Label id="labelDisplay" verticalCenter="1" horizontalCenter="0" />
            </s:Group>
        </s:ItemRenderer>
    </fx:Component>
</s:itemRenderer>

在文档中创建一个名为 lengthOfFirstItems 的 int 类型变量。我假设你有两个数组？一个用于顶部项目，一个用于底部项目？如果是这样，则将第二个数组添加到第一个数组（或使用所有数组创建第三个数组）。在加入数组之前，将 lengthOfFirstItems 设置为第一组项目的长度。因此，使用图像作为示例，长度将为 2，因为有两个项目，您的行，然后是其余项目。

// position of end of first array. must be public to be accessible by outerDocument
public var lengthOfFirstItems:int = -1;

// get length of first array
lengthOfFirstItems = firstArray.length;

在本示例中，该线将在第一个项目数组的最后一行中可见。您可能需要调整代码，因为其中一部分是伪代码。