Spark.components.List 和 TileLayout - 滚动条不显示（测试用例+附截图）

Question

我没有太多 Flex 经验，正在移植一个（正在运行的）闪存卡游戏到它。

我遇到了这个问题，我的列表没有显示滚动条，该列表应该显示代表游戏桌的自定义组件（最多 3 个玩家）：

我已经准备了一个包含 3 个短 MXML 文件的简化测试用例 - 一旦您将它们放入 Flash Builder 4.5 中的项目中，该测试用例就会立即运行 - 您将会看到我的问题。

Game.mxml（项目渲染器 - 代表游戏桌的蓝色矩形）：

<?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" 
    width="160" height="160">

    <fx:Script>
        <![CDATA[
            public function set gid(str:String):void {
                _gid.text = '#' + str;
            }

            public function get gid():String {
                return _gid.text.substring(1);
            }
        ]]>
    </fx:Script>

    <s:Rect x="0" y="0" width="{width}" height="{height}">
        <s:stroke>
            <s:SolidColorStroke color="red"/>
        </s:stroke> 
    </s:Rect>

    <s:Rect id="_rect" x="20" y="20" width="120" height="120" radiusX="16" radiusY="16">
        <s:stroke>
            <s:SolidColorStroke color="#4F69B5" weight="4"/>
        </s:stroke>     
        <s:fill>
            <s:SolidColor color="#CCDDEE" />
        </s:fill>
    </s:Rect>

    <s:Label id="_gid" x="0" y="75" width="{width}" fontSize="16" textAlign="center" color="#FFFFFF" />

</s:ItemRenderer>

Lobby.mxml（自定义组件 - 代表带有游戏桌列表的纸牌游戏大厅）：

<?xml version="1.0" encoding="utf-8"?>
<s:Group 
    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="700" height="450">

    <fx:Declarations>
        <s:RadioButtonGroup id="_group" itemClick="radioClicked(event);"/>
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.collections.XMLListCollection;
            import mx.events.ItemClickEvent;

            [Bindable]
            private var _games:XMLListCollection = new XMLListCollection();
            [Bindable]
            private var _users:XMLListCollection = new XMLListCollection();

            private function radioClicked(event:ItemClickEvent):void {
                if (event.item == _vac) {
                    _games.filterFunction = vacantGames; 
                } else if (event.item == _full) {
                    _games.filterFunction = fullGames; 
                } else {
                    _games.filterFunction = null; 
                }
                _games.refresh();
            }

            private function vacantGames(item:Object):Boolean {
                var xml:XML = item as XML;
                return xml.elements('user').length() < 3;
            }

            private function fullGames(item:Object):Boolean {
                var xml:XML = item as XML;
                return xml.elements('user').length() == 3;
            }

            public function update(xml:XML):void {
                _games.source = xml.game;
                _users.source = xml.lobby;
            }
        ]]>
    </fx:Script>

    <s:Rect x="0" y="0" width="{width-1}" height="{height-1}">
        <s:stroke>
            <s:SolidColorStroke color="red"/>
        </s:stroke> 
    </s:Rect>

    <s:VGroup>
        <s:HGroup>
        <s:Label text="Playing tables:" />
        <s:RadioButton groupName="_group" id="_all"  label="All" />
        <s:RadioButton groupName="_group" id="_vac"  label="Vacant" />
        <s:RadioButton groupName="_group" id="_full" label="Full" />
        </s:HGroup>

        <s:List itemRenderer="Game" dataProvider="{_games}">
            <s:layout>
                <s:TileLayout />
            </s:layout>
        </s:List>   
    </s:VGroup> 
</s:Group>

最后是 LobbyTest.mxml （带有 Lobby 组件和虚假 XML 数据来为其提供数据的应用程序）：

<?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"
    xmlns:comps="*"
    width="700" height="525"
    creationComplete="init()">

    <fx:Script>
        <![CDATA[
            private const XML_0:XML =
                <pref>
                  <lobby>
                    <user id="OK252342810632" />
                    <user id="OK122471020773" />
                    <user id="DE54" />
                    <user id="DE6948" />
                    <user id="OK406519496469" />
                    <user id="OK108900197210" />
                    <user id="OK266559712237" />
                    <user id="DE6577" />
                    <user id="DE7981" />
                    <user id="OK225312168135" />
                    <user id="OK20629248715" />
                    <user id="DE7880" />
                  </lobby>
                  <game id="0"/>
                  <game id="9012">
                    <user id="VK48058967" />
                    <user id="MR14315189992643135976" />
                    <user id="OK10218913103" />
                  </game>
                  <game id="9013">
                    <user id="OK305894249541" />
                    <user id="OK151358069597" />
                    <user id="OK515549948434" />
                  </game>
                  <game id="9007">
                    <user id="OK366541092321" />
                    <user id="DE7062" />
                    <user id="OK122700338897" />
                  </game>
                  <game id="8993">
                    <user id="OK78476527766" />
                    <user id="VK5692120" />
                    <user id="OK61881379754" />
                  </game>
                  <game id="8997">
                    <user id="OK96125953924" />
                    <user id="OK21042473963" />
                    <user id="OK278504320179" />
                  </game>
                  <game id="9001">
                    <user id="OK189404154785" />
                    <user id="OK143791302988" />
                    <user id="OK526501872510" />
                  </game>
                  <game id="8996">
                    <user id="VK6311467" />
                    <user id="OK354027621556" />
                    <user id="OK350266476029" />
                  </game>
                  <game id="8999">
                    <user id="OK24459857299" />
                    <user id="OK2104040126" />
                    <user id="OK231866548025" />
                  </game>
                  <game id="8991">
                    <user id="OK253525117889" />
                    <user id="OK529081480134" />
                  </game>
                  <game id="8937">
                    <user id="OK304672497140" />
                    <user id="VK90145027" />
                    <user id="OK338360548262" />
                  </game>
                  <game id="9005">
                    <user id="OK40798070412" />
                    <user id="DE7979" />
                    <user id="OK531589632132" />
                  </game>
                  <game id="8942">
                    <user id="VK20313675" />
                    <user id="OK57368684455" />
                    <user id="OK335173273155" />
                  </game>
                  <game id="8946">
                    <user id="OK353118989212" />
                    <user id="OK351923295875" />
                  </game>
                  <game id="9000">
                    <user id="DE7470" />
                    <user id="OK209621043939" />
                  </game>
                  <game id="9011">
                    <user id="OK321594287223" />
                    <user id="DE7692" />
                    <user id="OK260177162376" />
                  </game>
                  <game id="9010">
                    <user id="OK31902424355" />
                    <user id="OK357833936215" />
                  </game>
                </pref>;            

            public function init():void {
                lobby.update(XML_0);
            }           
        ]]>
    </fx:Script>

    <comps:Lobby id="lobby" x="0" y="0" width="80%" height="100%"/>

</s:Application>

请问有人知道出了什么问题吗？

Answer 1

试试这个：

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

    <fx:Declarations>
        <s:RadioButtonGroup id="_group" itemClick="radioClicked(event);"/>
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.collections.XMLListCollection;
            import mx.events.ItemClickEvent;

            [Bindable]
            private var _games:XMLListCollection = new XMLListCollection();
            [Bindable]
            private var _users:XMLListCollection = new XMLListCollection();

            private function radioClicked(event:ItemClickEvent):void {
                if (event.item == _vac) {
                    _games.filterFunction = vacantGames; 
                } else if (event.item == _full) {
                    _games.filterFunction = fullGames; 
                } else {
                    _games.filterFunction = null; 
                }
                _games.refresh();
            }

            private function vacantGames(item:Object):Boolean {
                var xml:XML = item as XML;
                return xml.elements('user').length() < 3;
            }

            private function fullGames(item:Object):Boolean {
                var xml:XML = item as XML;
                return xml.elements('user').length() == 3;
            }

            public function update(xml:XML):void {
                _games.source = xml.game;
                _users.source = xml.lobby;
            }
        ]]>
    </fx:Script>

    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:stroke>
            <s:SolidColorStroke color="red"/>
        </s:stroke> 
    </s:Rect>

    <s:VGroup left="1" right="1" top="1" bottom="1" horizontalAlign="justify">
        <s:HGroup>
        <s:Label text="Playing tables:" />
        <s:RadioButton groupName="_group" id="_all"  label="All" />
        <s:RadioButton groupName="_group" id="_vac"  label="Vacant" />
        <s:RadioButton groupName="_group" id="_full" label="Full" />
        </s:HGroup>

        <s:List itemRenderer="Game" dataProvider="{_games}" height="100%">
            <s:layout>
                <s:TileLayout />
            </s:layout>
        </s:List>   
    </s:VGroup> 
</s:Group>