首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 媒体动画 > flex >

Flex4兑现分组框GroupBox

2012-10-31 
Flex4实现分组框GroupBox?分组框(Group Box)是围绕在一组相关控件周围的带标签的矩形边框。它提供了一种通

Flex4实现分组框GroupBox


?分组框(Group Box)是围绕在一组相关控件周围的带标签的矩形边框。它提供了一种通过视觉展示控件关系

的方法。如下图所示:

Flex4兑现分组框GroupBox

?

本文将通过以下几步来实现:

一、继承SkinnableContainer,创建组件类GroupBox。

二、声明外观部件titleDisplay用来显示组合框的标题。
三、增加title属性。
四、覆盖partAdded方法,使标题字符串能够作用于外观部件titleDisplay。
五、创建它的默认外观(皮肤)GroupBoxSkin。
六、为GroupBox增加必要样式。
---------------
一、继承SkinnableContainer,创建组件类GroupBox。

?

?第二步,创建外观部件titleDisplay。

?
?第三步,创建外观部件contentGroup,用于包含组合框的内容。

?

?注意,此时边框是一个闭合的矩形。

?

?

?Flex4兑现分组框GroupBox

?图2
?从上图,可以看出现在组合框的标题文字与边框是重叠的,显然这不符合我们的要求。
?为了解决这个问题,下面要为边框创建一个遮罩。
?

?

?

?

?为<s:Rect id="border"/>增加属性:mask="{borderGroupMask}"。
六、为GroupBox增加必要样式。
?第一步,在GroupBox类中增加以下样式声明,它们用来指定边框的颜色和圆角。
?增加borderColor样式。

图3
完整的文件如下:
1 GroupBox.as

?
3 GroupBoxExam.mxml 实例文件

?

?

?

?

4 css

可以通过css为GroupBox指定样式的默认值。

     2 楼    anreddy    2010-10-01              好文!下在在下要找的资料,谢过了!    3 楼    critor    2010-10-13              挺好啊,楼主挺用心啊,拿走了。    4 楼    sjpsega    2010-10-28              很实用啊,顶了~    5 楼    wolfbrood    2010-10-28              挺好,谢谢了    6 楼    smithfox    2011-01-20              如果不考虑透明的情况,将Label设置背景色为白色后,并且使其z在上面,是不是简单些    7 楼    jinxinhero    2011-02-15              smithfox 写道如果不考虑透明的情况,将Label设置背景色为白色后,并且使其z在上面,是不是简单些
是简单
当时我们项目的背景不是白的

还有我觉得用遮罩也不太好,不过不太会写画线的方法,就将就了

热点排行