3

下の画像のようなタイル リストを作成する必要があります。タイル リストの最後にボタンが含まれており、スクロール バー内に配置する必要があります。私は運がない既存の 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 );

        } 

    }
4

3 に答える 3

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項目が表示されるように、すべての項目の高さに合わせてスケーリングする必要があります。
  • 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);
}
于 2013-08-16T11:29:15.547 に答える
0

ここで私が送ったリンクのコードは、おそらく役に立つでしょう：

<?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
于 2013-08-15T11:38:53.070 に答える