在古老的mx世界中,alternatingItemColors一直延伸到列表的高度。在火花列表中,它会停止数据结束的位置。有谁知道是否有一种简单的方法可以使Spark列表与mx列表类似?见下图。列表下方有空白区域,这不会发生在mx列表中。
答案 0 :(得分:0)
难度将取决于您的解决方案必须具有多大的灵活性,但总的来说,我认为您最好的选择是为此列表创建自定义皮肤。
您可以先复制Spark List皮肤(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部分,并进行了以下修改:
dataLayout
),以便我们以后可以轻松访问它我们现在将动态地将奇数行背景添加到oddRowGroup
。请注意,oddRowGroup
的左/右/上/下为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
(每次调整List的大小时调用其中),我们检查高度是否已更改。如果有,我们刷新奇数行背景。
我们通过删除为之前高度绘制的所有背景来实现此目的
我们从DataGroup的布局中获取rowHeight
,并计算所需背景的总数。然后我们根据这些数字创建一些Rect
,然后将它们添加到oddRowGroup
。
解决方案原样,有一些局限性。例如,交替的颜色是硬编码的(可以通过使用getStyle()
获得正确的颜色来轻松修复);它假定不会覆盖默认布局(VerticalLayout
);假设variableRowHeight
已关闭;可能还有一些。但我认为这是一个很好的起点。