Flex - 使用 CSS 自定义组件内部使用的滚动条

Question

我要做的是仅在滚动条显示在特定组件内时自定义滚动条的外观。 我不想更改我的应用程序的所有其他滚动条的外观。

我有一个面板，在那个面板里面有一个 VBox 并且滚动条出现在那个 vbox 里面，我想只使用 CSS 样式化那个滚动条。

我尝试在我的组件中添加类似这样的内容（测试只是为了移除滚动条的上下箭头）：

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";

    s|Scroller
    {
    up-arrow-skin: ClassReference("undefined");
    down-arrow-skin: ClassReference("undefined");
    }

</fx:Style>

结果是一个警告，上面写着：

CSS type selectors are not supported in components: 'spark.components.Scroller'

我搜索并发现我应该在组件内使用类选择器而不是类型选择器，但我不想创建自定义滚动条（我应该如何使用它？）。

编辑：我正在添加一个测试 CSS 类选择器的代码示例：

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";

    .noArrowsScroller
    {
    up-arrow-skin: ClassReference("undefined");
    down-arrow-skin: ClassReference("undefined");
    }


</fx:Style>

<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<mx:VBox width="100%" height="100%" paddingBottom="20" paddingLeft="20" paddingRight="20" paddingTop="20"
         horizontalAlign="center" verticalAlign="middle">


    <s:BorderContainer borderWeight="1" width="100%" height="100%" borderColor="0x79A8BD">
        <mx:VBox width="100%" height="100%" id="generalVBox" horizontalAlign="center"
                 minHeight="0" horizontalScrollPolicy="off">

        </mx:VBox>
    </s:BorderContainer>
</mx:VBox>  

vbox“generalVBox”是我希望我的自定义滚动条出现的那个。

在该 vBox 中，在运行时添加了几个可能导致滚动条出现的组件。

我应该如何应用我的“noArrowsScroller”类选择器？

编辑 2：在 Sunil cmets 之后，我尝试放置一个包装 VGroup 容器的 Scroller 组件并使用名为“noArrowsScrollbar”的类选择器，但滚动条样式保持不变。我还尝试设置颜色我的类选择器和那个属性有效，所以也许我使用了错误的 CSS 属性？

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" width="100%"     height="100%"
           creationComplete="application1_creationCompleteHandler(event)">

<fx:Script>
    <![CDATA[
        import mx.controls.Label;
        import mx.controls.LinkButton;
        import mx.events.FlexEvent;



        protected function application1_creationCompleteHandler(event:FlexEvent):void
        {
            if(v != null)
            {
                for(var i:int = 0; i < 100; i++)
                {
                    var lbl:Label = new Label();
                    lbl.text = String(i);

                    v2.addElement(lbl);
                }
            }
        }

    ]]>
</fx:Script>

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";

    .noArrowsScroller
    {
        down-arrow-skin: ClassReference("undefined");
        up-arrow-skin: ClassReference("undefined");
        color: red;
    }


</fx:Style>

<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>



<s:Panel width="50%" height="50%">
    <s:Scroller styleName="noArrowsScroller"
                 focusEnabled="false"
                 hasFocusableChildren="true"

                 height="100%"
                 horizontalCenter="0" verticalCenter="0">
        <s:VGroup width="100%" height="100%" id="v2" minHeight="0">

        </s:VGroup>
    </s:Scroller>
</s:Panel>

谢谢

Answer 1

组件中不允许使用 CSS 类型选择器。您所能做的就是：改用类选择器或尝试将其放在 MXML 中的根级 CSS 中。

Answer 2

现在您使用的是Scroller 和VGroup，您只需要修复用于取消设置/删除元素的语法：

试试这个：

.noArrowsScroller
{
        down-arrow-skin: ClassReference(null);
        up-arrow-skin: ClassReference(null);
}