apache-flex - Flex: 複数のリストをスクローラーに入れる

Question

複数のリストをスクローラーに配置したい (各リストはスクロールできない)。以下で私が行っていることは機能しますが、各リストの後に巨大なランダムギャップがあります. renderers.Pending を確認しましたが、ギャップの原因となるものは何もありません。verticalScrollPolicy をオフに設定した場合にのみ発生することに気付きました。私はそれをオンに設定したくありません。そうしないと、リスト自体がスクロール可能になります。

<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

さて、あなたの問題をシミュレートしようとしましたが、わかりませんでした。あなたが言ったように、私のコードは正常に動作しています。

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 を使用しています。SDK のバージョンは 4.1 です。

Answer 2

variableRowHeight="false" の設定が機能し、ランダムな空白が取り除かれました。ただし、現在、すべてのリスト項目の高さは、最も高い項目の高さです。それは私が推測する一時的な解決策です。

Answer 3

VGroup のギャップを 0 に設定します。