tion %> 为水平和垂直滚动条交汇处的白块添加样式|易点互动
当前位置:首页 > 建站知识

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

更新时间:2009.06.22 浏览次数:

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添加样式