为水平和垂直滚动条交汇处的白块添加样式

aihanzi提了很多建议，非常感谢 :)

对于容器中出现水平和垂直滚动条时，两条滚动条交汇处会生成一个纯白色的矩形，目前并无样式支持。对FLEX theme的编写多少有些影响。

综合aihanzi的建议和网上的资料，修改了mx.core.Container类，添加了三个基本的样式属性：

whiteBoxColor - 颜色(明明是white box，还要设置颜色 -_-!!!)
whiteBoxAlpha - 透明度
whiteBoxVisible - 是否可见

先看示例： Demo

接下来正式开工：

我们首先进入到FLEX SDK(本文适用sdk 3.2.0版)中：

sdks/3.2.0/frameworks/projects/framework/src/mx/core

将Container.as，Version.as复制到当前项目中，包路径也要相同，就是说复制到项目中mx/core文件夹下。

然后再用相同的方法将SDK中的mx.styles.metadata下面的：

    BarColorStyle.as
    BorderStyles.as
    PaddingStyles.as
    TextStyles.as

复制到项目中。最后结构如图：

然后打开Container.as，找到createOrDestroyScrollbars方法(4401行)，然后定位到4540行，
可以看到下面几行代码是设置whiteBox的。

我们修改生成whiteBox的代码部分，加入支持的样式，最后代码如下：
            if (!whiteBox)
            {
                whiteBox = new FlexShape();
                whiteBox.name = "whiteBox";

                var g:Graphics = whiteBox.graphics;
               
                var wbc:Number = StyleManager.getColorName(getStyle("whiteBoxColor"));
                var wba:Number = Number(getStyle("whiteBoxAlpha"));
                isNaN(wbc) ? wbc = 0xFFFFFF : null;
                isNaN(wba) ? wba = 1.0 : null;
                g.beginFill(wbc, wba);
               
                g.drawRect(0, 0, verticalScrollBar.minWidth, horizontalScrollBar.minHeight);
                g.endFill()

                rawChildren.addChild(whiteBox);
               
                var wbv:Boolean = getStyle("whiteBoxVisible").toString().toLowerCase()!="false";
                whiteBox.visible = wbv;
            }

上面是生成whiteBox的代码，那么若样式在运行时修改呢？
别急，我们再定位到2987行的styleChanged方法。

我们在方法尾部加入：
if (allStyles ||
            styleProp == "whiteBoxColor" ||
            styleProp == "whiteBoxAlpha" ||
            styleProp == "whiteBoxVisible")
        {
            if (whiteBox)
            {
                var wbv:Boolean = getStyle("whiteBoxVisible").toString().toLowerCase()!="false";
                whiteBox.visible = wbv;
               
                var g:Graphics = whiteBox.graphics;
                g.clear();
               
                var wbc:uint = StyleManager.getColorName(getStyle("whiteBoxColor"));
                var wba:Number = Number(getStyle("whiteBoxAlpha"));
               
                isNaN(wbc) ? wbc = 0xFFFFFF : null;
                isNaN(wba) ? wba = 1.0 : null;
                g.beginFill(wbc, wba);
               
                g.drawRect(0, 0, verticalScrollBar.minWidth, horizontalScrollBar.minHeight);
                g.endFill();
            }
        }

当相关样式发生改变时whiteBox将重新绘制。

回到主程序，加入样式表：

<mx:Style>
        Canvas
        {
            whiteBoxColor:#000000;
            whiteBoxAlpha:1.0;
            whiteBoxVisible:true;
        }
    </mx:Style>

然后拖入一个Canvas到Application中，将水平和垂直滚动条打开。编译运行便可发现原来的白块变成黑色的了。若运行时动态改变色彩，可以使用以下语句：

var css:CSSStyleDeclaration = StyleManager.getStyleDeclaration("mx.core.Canvas");
if(css)
    css.setStyle("whiteBoxColor", color);

源代码： Source

参考资料：

AIRIA BBS:Edison.sl

flex-using-custom-scrollbar-skins-youll-run-into-this-problem

改了标题了,通俗一些 :)
本文原标题: 为Container的whiteBox添加样式