Белый квадрат у скроллеров - решение проблемы; white box scrollbar issue

· На чтение уйдёт 2 минуты · (349 слов)

Многие наверняка видели "белые квадраты", которые появляются во flex-приложениях, при появлении 2х скроллбаров. В этой короткой статье рассказывается, как можно от них избавиться (два способа).

Для начала, для ясности, разберемся, откуда берется загадочный белый квадрат: откроем файл Container.as.

[geshi lang=Actionscript]        // Create or destroy the whiteBox.
        // If both scrollBars are active, there's an empty space
        // between the two scrollBars in the lower right corner.
        // The whiteBox fills that space, so that the container's
        // children aren't visible when they scroll underneath.
        if (horizontalScrollBar && verticalScrollBar)
        {
            if (!whiteBox)
            {
                whiteBox = new FlexShape();
                whiteBox.name = "whiteBox";
                var g:Graphics = whiteBox.graphics;
                g.beginFill(0xFFFFFF);
                g.drawRect(0, 0, verticalScrollBar.minWidth, horizontalScrollBar.minHeight);
                g.endFill()
                rawChildren.addChild(whiteBox);
            }
        }
[/geshi]

Вот код, создающий этот белый квадрат. Само по себе его присутствие - для меня необъяснимая загадка. Хорошие новости - переменная whiteBox во Flex 3 объявлена как protected, в то время как во Flex 2 - она private. Впрочем, привожу в любом случае решение, которое будет работать и во Flex 2 и во Flex 3.

[geshi lang=Actionscript]
	private function removeWhiteBox(): void {
		var wb: DisplayObject = rawChildren.getChildByName("whiteBox");
		if (wb) 
			wb.alpha = 0;
	}
	override public function validateDisplayList(): void {
		super.validateDisplayList();
		removeWhiteBox();
	}
	
	override protected function createChildren():void {
		super.createChildren();
		removeWhiteBox();
	}
[/geshi]

Существует и другое решение: можно обрабатывать событие added, например так:

[geshi lang=Actionscript]
	private function whiteBoxCheck(event:Event):void {
		if (event.target.name == "whiteBox") {
			FlexShape(event.target).alpha = 0;
		}
	}
	override protected function createChildren():void {
		addEventListener(Event.ADDED, whiteBoxCheck);
		super.createChildren();
	}
[/geshi]

В Сети можно найти альтернативное "решение" проблемы - удалять whiteBox. Ни к чему хорошему это не приводит, к сожалению - когда Flex будет удалять этот злосчастный белый квадрат самостоятельно, - будет ошибка. Если вашему скину требуется модификация белого квадрата, можно вместо удаления воспользоваться следующей техникой:

[geshi lang=Actionscript]
	var wb: FlexShape = rawChildren.getChildByName("whiteBox") as FlexShape;
	var graphics: Graphics = wb.graphics;
	// и рисовать на этом graphics все, что угодно :-)
[/geshi]

Само собой разумеется, лучший способ - это переопределение этих функций в классе-наследнике, так как перекомпиляция Flex - затея не самая лучшая. Например, если вы используете FlowBox из FlexLib (подробнее в статье про FlowBox), можно переопределить эти методы в классе FlowBox.

Полезное