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

Question

我需要创建一个如下图所示的平铺列表。它包含平铺列表末尾的按钮，它应该在滚动条内。我尝试扩展现有的 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 将对象放置在绝对位置，因此您需要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>

在这个链接中你可以试试这个。

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

1. 链接 1
2. 链接 2