移除列表项底部的边框

Question

以红色突出显示的部分！我该如何删除它？渲染列表的代码如下：

<s:List id="ui_lstIndexList" width="175" height="600" fontFamily="TwinCen"
                fontSize="24"
                alternatingItemColors="[]" borderVisible="false" downColor="#7fceff"
                change="showAlert(event)" contentBackgroundColor="#6fa8bc" color="#FFFFFF"
                dataProvider="{indexArrayCollection}" selectionColor="#7fceff">
            <s:itemRenderer>
                <fx:Component>
                    <s:IconItemRenderer labelField="name" messageField="artist"/>
                </fx:Component>
            </s:itemRenderer>
        </s:List>

谢谢！！！

Answer 1

这不是一件“容易”的事情。您需要创建一个扩展 IconItemRenderer 的自定义类，并从那里覆盖protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void。您需要删除在函数末尾绘制分隔符的部分。我知道，这很愚蠢，他们应该有自己的风格，但你总是可以实现自己的：

protected function drawBackground(unscaledWidth:Number, 
                                  unscaledHeight:Number):void
{
    // figure out backgroundColor
    var backgroundColor:*;
    var downColor:* = getStyle("downColor");
    var drawBackground:Boolean = true;

    if (down && downColor !== undefined)
    {
        backgroundColor = downColor;
    }
    else if (selected)
    {
        backgroundColor = getStyle("selectionColor");
    }
    else if (hovered)
    {
        backgroundColor = getStyle("rollOverColor");
    }
    else if (showsCaret)
    {
        backgroundColor = getStyle("selectionColor");
    }
    else
    {
        var alternatingColors:Array;
        var alternatingColorsStyle:Object = getStyle("alternatingItemColors");

        if (alternatingColorsStyle)
            alternatingColors = (alternatingColorsStyle is Array) ? (alternatingColorsStyle as Array) : [alternatingColorsStyle];

        if (alternatingColors && alternatingColors.length > 0)
        {
            // translate these colors into uints
            styleManager.getColorNames(alternatingColors);

            backgroundColor = alternatingColors[itemIndex % alternatingColors.length];
        }
        else
        {
            // don't draw background if it is the contentBackgroundColor. The
            // list skin handles the background drawing for us. 
            drawBackground = false;
        }

    } 

    // draw backgroundColor
    // the reason why we draw it in the case of drawBackground == 0 is for
    // mouse hit testing purposes
    graphics.beginFill(backgroundColor, drawBackground ? 1 : 0);
    graphics.lineStyle();
    graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
    graphics.endFill();

    var topSeparatorColor:uint;
    var topSeparatorAlpha:Number;
    var bottomSeparatorColor:uint;
    var bottomSeparatorAlpha:Number;

    // Selected and down states have a gradient overlay as well
    // as different separators colors/alphas
    if (selected || down)
    {
        var colors:Array = [0x000000, 0x000000 ];
        var alphas:Array = [.2, .1];
        var ratios:Array = [0, 255];
        var matrix:Matrix = new Matrix();

        // gradient overlay
        matrix.createGradientBox(unscaledWidth, unscaledHeight, Math.PI / 2, 0, 0 );
        graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, matrix);
        graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
        graphics.endFill();
    }

    // separators are a highlight on the top and shadow on the bottom
    /* OLD WAY OF DOING IT
    topSeparatorColor = 0xFFFFFF;
    topSeparatorAlpha = .3;
    bottomSeparatorColor = 0x000000;
    bottomSeparatorAlpha = .3;
    */

    // NEW WAY
    topSeparatorColor = getStyle('topSeparatorColor');
    topSeparatorAlpha = getStyle('topSeparatorAlpha');
    bottomSeparatorColor = getStyle('bottomSeparatorColor');
    bottomSeparatorAlpha = getStyle('bottomSeparatorAlpha');


    // draw separators
    // don't draw top separator for down and selected states
    if (!(selected || down))
    {
        graphics.beginFill(topSeparatorColor, topSeparatorAlpha);
        graphics.drawRect(0, 0, unscaledWidth, 1);
        graphics.endFill();
    }

    graphics.beginFill(bottomSeparatorColor, bottomSeparatorAlpha);
    graphics.drawRect(0, unscaledHeight - (isLastItem ? 0 : 1), unscaledWidth, 1);
    graphics.endFill();


    // add extra separators to the first and last items so that 
    // the list looks correct during the scrolling bounce/pull effect
    // top
    if (itemIndex == 0)
    {
        graphics.beginFill(bottomSeparatorColor, bottomSeparatorAlpha);
        graphics.drawRect(0, -1, unscaledWidth, 1);
        graphics.endFill(); 
    }

    // bottom
    if (isLastItem)
    {
        // we want to offset the bottom by 1 so that we don't get
        // a double line at the bottom of the list if there's a 
        // border
        graphics.beginFill(topSeparatorColor, topSeparatorAlpha);
        graphics.drawRect(0, unscaledHeight + 1, unscaledWidth, 1);
        graphics.endFill(); 
    }


}

从这里开始，您只需要设置 topSeparatorColor、Alpha 或其他样式。或者甚至改变所有这些并拥有一个“showSeparator”样式，它只是将它们全部隐藏起来。你可以用它做任何你想做的事。

Answer 2

单击您的 IconItemRenderer，然后开始输入“skinClass”。当您使用代码完成时，它将提供“新皮肤...”选项，使用它来创建一个新的、可编辑的皮肤。如果它不存在，它将在 List 皮肤中。