Question

我需要创建一个类似下图的图块列表。它包含tile列表末尾的按钮，它应该在滚动条内。我试着扩展现有的TileList而没有运气。

enter image description here

示例代码

public class CustomTileList extends TileList {  

        public function CustomTileList()
        {
            super();            

        }

        protected var _button : Button ;

        public function get button ( ) : Button {
            return this._button ;
        }

        public function set button ( value : Button ) : void {
            this._button = value;
        }       

        override protected function createChildren():void
        {           
            super.createChildren();
            _button = new Button ();
            _button .label = "More";

            this.addChildAt( _button , super.numChildren - 1 );

        } 

    }

Answer 1

在遵循Christophe Herreman的方法时，如果需要在Flex 3中实现此目的，则必须使用Canvas作为容器并设置正确的滚动策略。见下面的例子

<mx:Canvas horizontalScrollPolicy="off" verticalScrollPolicy="auto" height="300">
    <mx:TileList id="tileList" horizontalScrollPolicy="off" verticalScrollPolicy="off" columnCount="2">
        <mx:itemRenderer>
            <mx:Component>
                <mx:VBox width="100" height="100" verticalAlign="middle" horizontalAlign="center">
                    <mx:Label text="{data}" />
                </mx:VBox>
            </mx:Component>
        </mx:itemRenderer>
        <mx:dataProvider>
            <mx:ArrayCollection>
                <mx:String>Tile 1</mx:String>
                <mx:String>Tile 2</mx:String>
                <mx:String>Tile 3</mx:String>
                <mx:String>Tile 4</mx:String>
                <mx:String>Tile 5</mx:String>
                <mx:String>Tile 6</mx:String>
                <mx:String>Tile 7</mx:String>
                <mx:String>Tile 8</mx:String>
            </mx:ArrayCollection>
        </mx:dataProvider>
    </mx:TileList>
    <mx:Button id="button" label="Button" />
</mx:Canvas>

由于以下原因，这是不够的

tileList必须缩放到所有项目的高度，以便所有项目都可见。
Canvas将对象置于绝对位置，因此您需要正确放置button。

考虑到容器可以扩展的事实以及tileList可能包含更多项目的事实，这些更改可以在updateDisplayList函数中完成，如下所示。

override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ):void {
    super.updateDisplayList( unscaledWidth, unscaledHeight );

    tileList.height = tileList.rowHeight * Math.ceil( tileList.dataProvider.length / tileList.columnCount );
    button.y = tileList.height;
    button.x = (tileList.width / 2) - (button.width / 2);
}

Answer 2

像Christophe Herreman说的那样，我建议你把一个Hgroup放到滚动条中，进入这个Hgroup，你把你的tileList和按钮放在一起。

以下是一些示例代码：

<s:Scroller width="100%" height="100%">
    <s:HGroup>
        <s:TileGroup requestedColumnCount="2" requestedRowCount="2">
            <s:Button />
            <s:Button />
            <s:Button />
            <s:Button />
        </s:TileGroup>
        <s:Button label="Button" />
    </s:HGroup>
</s:Scroller>

Answer 3

这里发送的链接代码可能很有用：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" minWidth="955" minHeight="600" creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            public function init():void{
                var arr:ArrayCollection = new ArrayCollection();
                arr.addItem(new Object());
                arr.addItem(new Object());
                arr.addItem(new Object());
                arr.addItem(new Object());
                arr.addItem(new Object());
                arr.addItem(new Object());
                tl.dataProvider = arr;
            }
        ]]>
    </mx:Script>

    <mx:TileList id="tl" allowMultipleSelection="true" columnCount="1" verticalScrollPolicy="on">             
        <mx:itemRenderer>
            <mx:Component>                       
                <mx:VBox height="100%" width="100%" borderStyle="solid" horizontalAlign="center">
                    <mx:Grid id="myGrid">
                        <mx:GridRow id="row1">
                            <mx:GridItem>
                                <mx:Button label="Button 1"/>
                            </mx:GridItem>
                            <mx:GridItem>
                                <mx:Button label="Button 2"/>
                            </mx:GridItem>
                        </mx:GridRow>
                        <mx:GridRow id="row2">
                            <mx:GridItem>
                                <mx:Button label="Button 3"/>
                            </mx:GridItem>
                            <mx:GridItem>
                                <mx:Button label="Button 4"/>
                            </mx:GridItem>
                        </mx:GridRow>                   
                    </mx:Grid>      
                    <mx:Button label="Button 5"/>
                </mx:VBox>
            </mx:Component>
        </mx:itemRenderer>
    </mx:TileList>
</mx:Application>

在 link 中，您可以试试这个。

注意：这是展示itemrenderer如何工作的基本示例，但是在另一个组件中有一个itemrenderer可能会更好。有关更多说明，请参阅此链接：

在as3中创建自定义磁贴列表

3 个答案: