Удаление границы в нижней части списка элементов

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».Когда вы используете завершение кода, он предложит опцию «новый скин ...» Используйте это, чтобы создать новый, редактируемый скин.Если его там нет, он будет в скине списка.