Question

我在我的flex应用程序中为滚动条设置了外观并遇到了一个问题。滚动条之间的这个白色方块（查看图像）ruibs我的所有设计，我需要禁用它，让它不可见，改变它的背景颜色，alpha或smth像这样。

我可以在这里粘贴一些代码，但我认为没有必要。在Flex 3中工作。任何想法？

alt text http://img97.imageshack.us/img97/9206/scrollbar.png

Answer 1

我实际上发现了查看Flex框架内部的罪魁祸首。此方块（称为whiteBox）在Container.as中创建。

很容易摆脱它，你只需要创建一个扩展你想要使用的容器的类。

画布的例子：

package
{
    import mx.containers.Canvas;

    public class NoWhiteBoxCanvas extends Canvas
    {

        public function NoWhiteBoxCanvas()
        {
            super();
        }

        override public function validateDisplayList():void
        {
            super.validateDisplayList();
            this.whiteBox.visible = false;
        }

    }
}

然后在你的MXML中：

<local:NoWhiteBoxCanvas width="300" height="300" horizontalScrollPolicy="on" verticalScrollPolicy="on"/>

......然后再没有白方了;）

Answer 2

您是否尝试过设置

background-alpha: 0.0;

获取滚动条的容器上的

？它应该让容器的矩形接收父母的颜色。

Answer 3

一个肮脏的伎俩是使用掩码来隐藏那个方块。像这样：

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="creationComplete()">

    <mx:Script>
        <![CDATA[
            import mx.core.UIComponent;

            public function creationComplete():void
            {
                var compMask:UIComponent = new UIComponent;
                compMask.graphics.beginFill( 0xff0000 );
                compMask.graphics.drawRect( 0, 0, comp.width, comp.height - 16 );
                compMask.graphics.drawRect( 0, comp.height - 16, comp.width - 16, 16 );
                compMask.graphics.endFill();
                addChild( compMask );
                comp.mask = compMask;
            }
        ]]>
    </mx:Script>

    <mx:Canvas id="comp" width="300" height="300" horizontalScrollPolicy="on" verticalScrollPolicy="on"/>

</mx:WindowedApplication>

试过它，它有效。每次调整组件大小时，您只需重新绘制蒙版。最好的办法是创建一个扩展Canvas并自己完成工作的自定义类。

编辑：当然，如果值不同，您需要将自定义滚动条的权重更改为“16”。

Answer 4

您已经有了一个很好的答案，但另一种方法是手动管理您的滚动条。您可以在应用程序的任何位置放置滚动条并将其绑定以滚动所需的控件。这样做可以有效地使垂直滚动条拉伸额外的16像素以覆盖白盒。请注意，如果保证始终需要滚动条，我只会这样做。最终会看起来像我真正糟糕的文字：

          |  |
          |  |
__________|__|
_______| >|\/|

滚动条皮肤问题

4 个答案: