3.27.用简单重组行为创建Tile 容器

2023-08-08 22:33:03

字体：大中小

来源：转载

供稿：网友

3.27.1 问题
你想要让用户可以在Tile 容器里面拖拽其瓷砖（tile）并且在用户放下瓷砖（tile）的时候容器重组。
3.27.2 解决办法
使用Tile 继承自DisplayObjectContainer 类的swapChildrenmethod 方法来改变Tile 内子组件的位置。
3.27.3 讨论
Tile 容器给子组件布局的方式和Box 大体相同，除了有空间放置适合非第一方向的第二渲染器存在的情形，Tile 容器可添加多个itemRenderer。如果Tile 容器的direction 属性设置为horizontal，例如，并且Tile 容器为400 像素宽，而添加进来的元素宽度150 像素，那么这个瓷砖(tile)在添加两个这样的组件之后，会根据需要提供垂直方向上的滚动条来添加后面的组件直到添加结束。Tile 组件通常创建像网格这样的排列方式（图Figure 3-2）

在下面的例子中，Tile 组件用来排列它的子组件。当一个子组件拖拽操作放下时，Tile 被标记，并通过调用invalidateDisplayList 方法重绘。

-XML

<mx:Tile xmlns:mx="http://www.adobe.com/2006/mxml" width="300"
height="600" direction="horizontal">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
private function childStartDrag(event:Event):void
{
(event.currentTarget as UIComponent).startDrag(false,
this.getBounds(stage));
(event.currentTarget as
UIComponent).addEventListener(MouseEvent.MOUSE_UP,
childStopDrag);
(event.currentTarget as
UIComponent).addEventListener(MouseEvent.ROLL_OUT,
childStopDrag);
swapChildren((event.currentTarget as UIComponent),
getChildAt(numChildren-1));
}
private function childStopDrag(event:Event):void
{
swapChildren((event.currentTarget as UIComponent),
hitTestChild((event.currentTarget as UIComponent)));
(event.currentTarget as UIComponent).stopDrag();
this.invalidateDisplayList();
this.invalidateProperties();
}
private function
hitTestChild(obj:UIComponent):DisplayObject
{
for(var i:int = 0; i<this.numChildren; i++)
{
if(this.getChildAt(i).hitTestObject(obj))
{
return getChildAt(i);
}
}r
return getChildAt(0)
}

]]>
</mx:Script>
<mx:Panel title="First Panel"
mouseDown="childStartDrag(event)">
<mx:Text text="First Text"/>
</mx:Panel>
<mx:Panel title="Second Panel"
mouseDown="childStartDrag(event)">
<mx:Text text="Second Text"/>
</mx:Panel>
<mx:Panel title="Third Panel"
mouseDown="childStartDrag(event)">
<mx:Text text="Third Text"/>
</mx:Panel>
<mx:Panel title="Fourth Panel"
mouseDown="childStartDrag(event)">
<mx:Text text="Fourth Text"/>
</mx:Panel>
</mx:Tile>