apache-flex - 火花列表 - 交替项目颜色 - 延伸到底部

Question

在旧的 mx 世界中，alternatingItemColors 一直延伸到列表的高度。在火花列表中，它在数据结束的地方停止。有谁知道是否有一种简单的方法可以使 Spark 列表的行为类似于 mx 列表？见下图。列表下方有空格，这在 mx 列表中不会发生。

Answer 1

难度将取决于您的解决方案必须有多灵活，但总的来说，我认为您最好的选择是为此列表创建自定义皮肤。

创建自定义皮肤

您可以首先复制 Spark 列表皮肤 ( spark.skins.spark.ListSkin ) 并对它进行一些小的修改：

<!-- AlternatingColorListSkin.mxml -->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Metadata>
        [HostComponent("spark.components.List")]
    </fx:Metadata>

    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
    </s:states>

    <s:Rect id="background" left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:SolidColor id="bgFill" color="0xEEEEEE"/>
        </s:fill>
        <s:stroke>
            <s:SolidColorStroke id="borderStroke" weight="1"/>
        </s:stroke>
    </s:Rect>

    <s:Group id="oddRowGroup" left="1" right="1" top="1" bottom="1" clipAndEnableScrolling="true"/>

    <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" minViewportInset="1" hasFocusableChildren="false">
        <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
            <s:layout>
                <s:VerticalLayout id="dataLayout" gap="0" horizontalAlign="contentJustify" requestedMinRowCount="5"/>
            </s:layout>
        </s:DataGroup>
    </s:Scroller>

</s:Skin>

在上面的代码中，我省略了与此答案无关的 ListSkin 部分，并进行了以下修改：

• 背景填充颜色是偶数行的颜色（默认不是白色）
• 我添加了“oddRowGroup”，我们将在其中添加一些较暗的矩形
• 我给了 DataGroup 的布局一个 id ( dataLayout) 以便我们以后可以轻松访问它

添加奇数行背景

我们现在将oddRowGroup动态添加奇数行背景。请注意，oddRowGroup'left/right/top/bottom 为 1，因此行背景不会与主背景的边框重叠。它还clipAndEnableScrolling设置了true哪个将导致最后一个奇数行的任何可能重叠被剪裁。

现在在皮肤的脚本块中添加以下代码：

private var previousHeight:Number = NaN;

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    if (previousHeight != unscaledHeight) refreshBackground(unscaledHeight);
    previousHeight = unscaledHeight;
}

private function refreshBackground(height:Number):void {
    var rowHeight:Number = dataLayout.rowHeight;
    var maxRows:int = height / rowHeight / 2;
    oddRowGroup.removeAllElements();

    for (var i:int = 0; i < maxRows; i++) {
        var row:FilledElement = new Rect();
        row.left = row.right = 0;
        row.height = rowHeight;
        row.top = (i * 2 + 1) * rowHeight;
        row.fill = new SolidColor(0xdfdfdf);
        oddRowGroup.addElement(row);
    }
}

这里会发生什么？
在updateDisplayList（每次调整列表大小时都会调用它），我们检查高度是否发生了变化。如果有，我们刷新奇数行背景。

我们通过删除为先前高度绘制的所有背景来做到这一点。
我们rowHeight从 DataGroup 的布局中得到 ，然后计算所需背景的总数。然后我们Rect根据这些数字创建一些 s 并将它们添加到oddRowGroup.

限制

目前的解决方案有一些局限性。例如，交替颜色是硬编码的（可以通过使用 获取正确的颜色轻松修复getStyle()）；它假定不会覆盖默认布局（即 a VerticalLayout）；它假定variableRowHeight已关闭；可能还有更多。但我认为这是一个很好的起点。