Flex:将多个列表放在滚动条中

时间:2013-06-11 18:08:34

标签: flex actionscript flash-builder flex-spark

我想在滚动条中放置多个列表(每个列表都不可滚动)。我在下面做的工作,但每个列表后有一个巨大的随机差距。我已经检查过渲染器。等待并没有任何因素造成的差距。我注意到只有当我将verticalScrollPolicy设置为off时才会发生这种情况。我不想将其设置为on,否则列表本身将是可滚动的。

<s:Scroller height="80%" width="100%">
            <s:VGroup width="100%">
                <s:Label bottom="5" width="100%" styleName="normalWhite" text="Heading 1" textAlign="left" fontSize="18" />
                <s:List id="pendingList1"
                        width="100%" 
                        includeIn="pending"
                        dataProvider="{Info}" contentBackgroundAlpha="0"
                        itemRenderer="renderers.Pending"
                        styleName="customList" alternatingItemColors="[#13237d]" 
                        selectionColor="#009de0"
                        dragEnabled="false"
                        dragMoveEnabled="false"
                        dropEnabled="false"
                        verticalScrollPolicy="off">
                    <s:layout>
                        <s:VerticalLayout horizontalAlign="justify" gap="1"/>
                    </s:layout>
                </s:List>

                <s:Label bottom="5" width="100%" styleName="normalWhite" text="Heading 2" textAlign="left" fontSize="18" />
                <s:List id="pendingList2"
                        width="100%" 
                        includeIn="pending"
                        dataProvider="{Info}" contentBackgroundAlpha="0"
                        itemRenderer="renderers.Pending"
                        styleName="customList" alternatingItemColors="[#13237d]" 
                        selectionColor="#009de0"
                        dragEnabled="false"
                        dragMoveEnabled="false"
                        dropEnabled="false"
                        verticalScrollPolicy="off">
                    <s:layout>
                        <s:VerticalLayout horizontalAlign="justify" gap="1"/>
                    </s:layout>
                </s:List>
           </s:VGroup>
 </s:Scroller>

3 个答案:

答案 0 :(得分:0)

好吧,我试图模拟你的问题,但我没有得到它。正如你所说,我的代码工作正常。

<强> test.mxml

<?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" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;

            private var Info:ArrayCollection = new ArrayCollection(["num 1","num 2","num 3","num 4","num 5","num 6","num 7","num 8","num 9","num 10"]);  

            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                // TODO Auto-generated method stub
                Info.addAll(new ArrayCollection(["num 1","num 2","num 3","num 4","num 5","num 6","num 7","num 8","num 9","num 10"]));
                Info.addAll(new ArrayCollection(["num 1","num 2","num 3","num 4","num 5","num 6","num 7","num 8","num 9","num 10"]));
                Info.addAll(new ArrayCollection(["num 1","num 2","num 3","num 4","num 5","num 6","num 7","num 8","num 9","num 10"]));
                Info.addAll(new ArrayCollection(["num 1","num 2","num 3","num 4","num 5","num 6","num 7","num 8","num 9","num 10"]));
                Info.addAll(new ArrayCollection(["num 1","num 2","num 3","num 4","num 5","num 6","num 7","num 8","num 9","num 10"]));
                Info.addAll(new ArrayCollection(["num 1","num 2","num 3","num 4","num 5","num 6","num 7","num 8","num 9","num 10"]));
                Info.addAll(new ArrayCollection(["num 1","num 2","num 3","num 4","num 5","num 6","num 7","num 8","num 9","num 10"]));
                Info.addAll(new ArrayCollection(["num 1","num 2","num 3","num 4","num 5","num 6","num 7","num 8","num 9","num 10"]));

            }

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

    <s:Scroller height="80%" width="100%">
        <s:VGroup width="100%">
            <s:Label bottom="5" width="100%" styleName="normalWhite" text="Heading 1" textAlign="left" fontSize="18" />
            <s:List id="pendingList1"
                    width="100%" 

                    dataProvider="{Info}" contentBackgroundAlpha="0"
                    itemRenderer="renderers.Pending"
                    styleName="customList" alternatingItemColors="[#13237d]" 
                    selectionColor="#009de0"
                    dragEnabled="false"
                    dragMoveEnabled="false"
                    dropEnabled="false"
                    >
                <s:layout>
                    <s:VerticalLayout horizontalAlign="justify" gap="1"/>
                </s:layout>
            </s:List>

            <s:Label bottom="5" width="100%" styleName="normalWhite" text="Heading 2" textAlign="left" fontSize="18" />
            <s:List id="pendingList2"
                    width="100%" 

                    dataProvider="{Info}" contentBackgroundAlpha="0"

                    styleName="customList" alternatingItemColors="[#13237d]" 
                    selectionColor="#009de0"
                    dragEnabled="false"
                    dragMoveEnabled="false"
                    dropEnabled="false"
                    >
                <s:layout>
                    <s:VerticalLayout horizontalAlign="justify" gap="1"/>
                </s:layout>
            </s:List>
        </s:VGroup>
    </s:Scroller>
</s:Application>

<强> renderers.Pending

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" 
                autoDrawBackground="true">

    <s:Label text="{data}"/>

</s:ItemRenderer>

请不要寻找编码标准。这里太糟糕了。 我正在使用Flash Builder 4&amp; sdk版本是4.1

答案 1 :(得分:0)

设置variableRowHeight =“false”工作并摆脱随机空白区域。但是,现在所有列表项的高度都是最高项的高度。我想这是临时解决方案。

答案 2 :(得分:0)

将VGroup上的间隙设置为0