apache-flex - Flex：将多个列表放入滚动条中

Question

我想将多个列表放在一个滚动器中（每个列表都不可滚动）。我在下面所做的工作，但每个列表之后都有一个巨大的随机差距。我检查了 renderers.Pending 并没有造成差距。我注意到它只有在我将verticalScrollPolicy 设置为关闭时才会发生。我不想将其设置为 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>

Answer 1

设置 variableRowHeight="false" 工作并摆脱了随机空白。但是，现在所有列表项的高度都是最高的项的高度。我猜这是临时解决方案。

Answer 2

好吧，我试图模拟你的问题，但我没有得到它。正如你所说，我的代码运行良好。

测试.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>

渲染器.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 & sdk 版本是 4.1

Answer 3

将 VGroup 上的 Gap 设置为 0