如何使用 vslider 作为列表的滚动条？

Question

如何使用 vslider 作为列表的滚动条？我已经得到了这个，但无法从这里弄清楚：

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

<s:VSlider id="slider" minimum="0" maximum="{listy.height}" liveDragging="true"/>

<s:List id="listy" width="50%" height="100">
    <s:layout>
        <s:VerticalLayout id="vLayout" verticalScrollPosition="{slider.value}" />
    </s:layout>

    <mx:ArrayCollection>
        <fx:String>Flash</fx:String> 
        <fx:String>Director</fx:String> 
        <fx:String>Dreamweaver</fx:String> 
        <fx:String>ColdFusion</fx:String> 
        <fx:String>Flash</fx:String> 
        <fx:String>Director</fx:String> 
        <fx:String>Dreamweaver</fx:String> 
        <fx:String>ColdFusion</fx:String> 
        <fx:String>Flash</fx:String> 
        <fx:String>Director</fx:String> 
        <fx:String>Dreamweaver</fx:String> 
        <fx:String>ColdFusion</fx:String> 
    </mx:ArrayCollection>
</s:List>
</s:Application>

编辑：使用下面的内特的建议，我现在已经让它工作了，但它显示了 vslider 以及默认滚动条。如何隐藏默认滚动条？我尝试设置verticalScrollPolicy =“off”，但这不起作用。谢谢

Answer 1

这是完全可能的，我的目标是证明这一点！不开玩笑了，这里只是一些简单的绑定，你已经非常接近了！

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

    <s:Group>
        <s:layout>
            <s:HorizontalLayout/>
        </s:layout>

        <s:List id="listy" width="50%" height="100" 
                change="slider.value=listy.layout.verticalScrollPosition" creationComplete="
                listy.dataGroup.addEventListener(MouseEvent.MOUSE_WHEEL, function():void{
                    slider.value=listy.layout.verticalScrollPosition}
                );">
            <s:layout>
                <s:VerticalLayout id="vLayout" verticalScrollPosition="{slider.value}" />
            </s:layout>

            <mx:ArrayCollection>
                <fx:String>Flash</fx:String> 
                <fx:String>Director</fx:String> 
                <fx:String>Dreamweaver</fx:String> 
                <fx:String>ColdFusion</fx:String> 
                <fx:String>Flash</fx:String> 
                <fx:String>Director</fx:String> 
                <fx:String>Dreamweaver</fx:String> 
                <fx:String>ColdFusion</fx:String> 
                <fx:String>Flash</fx:String> 
                <fx:String>Director</fx:String> 
                <fx:String>Dreamweaver</fx:String> 
                <fx:String>ColdFusion</fx:String> 
            </mx:ArrayCollection>
        </s:List>

        <s:VSlider id="slider" height="{listy.height}" 
                   minimum="0" maximum="{listy.dataGroup.contentHeight - listy.height}" 
                   showDataTip="false" scaleY="-1" liveDragging="true"/> 

    </s:Group>
</s:Application>

如果您不明白其方式和原因，请联系我:)

Answer 2

我建议您实现目标的最佳方法是剥皮。为 VScrollBar 创建外观，其外观与 VSlider 相同。然后创建自定义 Scroller 皮肤（采用 spark.skins.spark.ScrollerSkin 作为模式）并在那里分配这些滚动条皮肤。然后创建自定义 List 皮肤（基于 spark.skins.spark.ListSkin）并将 Scroller 皮肤分配给 Scroller那里。

如果您（由于某种原因）必须使用原始的 VSlider，您需要编写自己的带有滑块的 Scroller 并在您的 List< 中使用它/代码> 皮肤。

我建议你第一种方法。

Answer 3

如何使用 vslider 作为列表的滚动条？我有这个，但是
从这里无法弄清楚：

不幸的是，我不相信如果不进行重大返工这是可能的。

该列表在 ListSkin 内部作为 Scroller 和 DataGroup 实现。
Scroller 有两个外观部分：verticalScrollBar 和horizo​​ntalScrollBar。您想用 VSlider 替换 veritcalScrollBar。

不幸的是，皮肤需要一个 VScrollBar 实例，并且没有可以用来替换另一个的接口类。 （Scroller 实现是使用 Flex 2/3 方法实现的，以便使其难以扩展）

您必须使用黑魔法来完成这项工作。

然而，尝试将 VSCrollBar 的外观设置为 VSlider 似乎确实是您最好的选择。