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;

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

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

2 个答案: