深入剖析Flex4与自定义布局关系-flex布局 flex:1

在学习Flex4的过程中，你对自定义布局的概念是否熟悉，这里和大家分享一下Flex4与自定义布局的关系，Flex4/Spark组件架构的新功能之一是可以定制一个容器的布局而不必改变容器本身。您需要做的就是定义一个自定义布局。

Flex4与自定义布局

如果您还不熟悉Flex4的***功能，那么有些内容肯定是您想要了解的。Flex4/Spark组件架构的新功能之一是可以定制一个容器的布局而不必改变容器本身。您需要做的就是定义一个自定义布局。

Flex4/Spark架构中的容器并不控制它们自己的布局。相反，每种容器具有一个布局属性，用于确定如何在屏幕上设置子元素的布局。可以使用一个单独的Group容器，并赋予其一个垂直布局、水平布局或平铺布局，这取决于您将如何创建它。
代码很简单，如下所示：

<s:layout> 
<s:VerticalLayout/> 
</s:layout> 
1.
2.
3.

不过真正的好处在于您不必局限于框架中定义的默认布局。您可以轻松定制BaseLayout类来实现自己定制的布局逻辑。下面是一个简单的例子，显示了如何实现一个在原点周围顺时针放置组件的布局。只要单击左下方的按钮就可以将更多按钮添加到布局。

下面是主应用程序文件的代码。可以看到，代码相当简单。这就是一个DataGroup，有点像一个重复程序（repeater），它包含一组按钮。这个容器的布局基于一个自定义布局实现。在creationComplete中，填充DataGroup的数据提供程序，从而在布局中创建按钮实例。

可以看到，DataGroup实例的布局受CircularLayout类控制（该类如下所示）。该类只是循环遍历datagroup对象的子对象并将它们按顺时针方向放在一个圆圈内。我查看了VerticalLayout类的源代码，弄清了它的工作方式，并由此开始构建自己的布局实现。

package  
{  
importmx.core.ILayoutElement;  
 
importspark.layouts.supportClasses.LayoutBase;  
 
publicclassCircularLayoutextendsLayoutBase  
{  
overridepublicfunctionupdateDisplayList(w:Number,h:Number):void  
{  
super.updateDisplayList(w,h);  
 
if(!target)  
return;  
 
varlayoutElement:ILayoutElement;  
varcount:uint=target.numElements;  
 
varangle:Number=360/count;  
varradius:Number=Math.min(target.width/2,target.height/2)-25;  
 
varw2:Number=target.width/2;  
varh2:Number=target.height/2;  
 
for(vari:int=0;i<count;i++)  
{  
layoutElement=target.getElementAt(i);  
 
if(!layoutElement||!layoutElement.includeInLayout)  
continue;  
 
varradAngle:Number=(angle*i)*(Math.PI/180);  
 
var_x:Number=Math.sin(radAngle);  
var_y:Number=-Math.cos(radAngle);  
 
layoutElement.setLayoutBoundsPosition(w2+(_x*radius)-25,h2+(_y*radius)-10);  
}  
}  
}  
}  
 
<s:ItemRenderer 
xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/halo"> 
 
<s:states> 
<s:Statenames:Statename="normal"/> 
<s:Statenames:Statename="hovered"/> 
</s:states> 
 
<s:layout> 
<s:BasicLayout/> 
</s:layout> 
 
<s:Buttonlabels:Buttonlabel="{data}"baseColor.hovered="#FF0000"/> 
 
</s:ItemRenderer> 
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.

这个示例中使用的项目渲染器实际上是最基本的。它是一个只包含一个按钮的ItemRenderer实例，简单明了并且很容易看到产生的结果。

【编辑推荐】