actionscript-3 - 在 as3 中创建自定义图 block 列表

Question

我需要创建一个如下图所示的图 block 列表。它包含图 block 列表末尾的按钮，它应该在滚动条内。我尝试扩展现有的 TileList 但没有成功。

示例代码

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 将对象放置在绝对位置，因此您需要正确放置按钮。

考虑到容器可以缩放这一事实以及 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);
}