Flex 4 实现自定义 fieldset 功能

好久没有写点东西了，最近接到 Flex4 研发任务，flex 自带组件功能比较弱，都要自己扩展，不像 ext ，都是定义好的组件，90% 以上需要用到的组件都不需要自己动手，直接可以使用，但这样也有个好处，把发挥的空间留给研发和美工，现成的东西再好看多了也会有审美疲劳的，而且千遍一律，未必是好现象，也不利于自身的提高，我想这也是一部分人宁愿用类似 jquery 之类的轻量级的框架也不用 ext 的原因，当然也有加载速度等原因。

不扯了，写了个类似 fieldset 的小东西，希望可以给需要的一点帮助。

package test
{
	import flash.geom.Point;
	
	import mx.core.IVisualElement;
	
	import spark.components.Label;
	import spark.components.VGroup;
	
	public class MyVGroup extends VGroup
	{
		public function MyVGroup()
		{
			super();
		}
		
		private var vgtitle:Label;		// 标题控件
		private var _title:String;		// 设置标题变量
		private var _pad:int;			// 设置自定义容器中添加的子控件与边框的距离，上边距*2
		private var _pos:int;			// 设置标题相对容器的 x 坐标
		
		override protected function createChildren():void {
			super.createChildren();
			
			if (!vgtitle) {
				vgtitle = new Label();
				vgtitle.text = title;
				
				addElement(vgtitle);
			}
		}
		
		override protected function measure():void {
			super.measure();
			
			pad = pad <= 0 ? 10 : pad;
			// 增加容器的大小
			measuredWidth += pad * 2;
			measuredHeight += pad;
			
			// 设置子控件距离边框的距离
			paddingLeft = pad;
			paddingTop = pad * 2;
			paddingRight = pad;
			paddingBottom = pad;
		}
		
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
			// 清除自定义边框重画
			graphics.clear();
			super.updateDisplayList(unscaledWidth, unscaledHeight);
			
			// 移动标题至目标位置
			pos = pos <= 0 ? 18 : pos;
			vgtitle.move(pos, 0);
			
			//根据标题位置画出边框位置
			graphics.lineStyle(1, 0x000000, 1.0);
			graphics.moveTo(vgtitle.x - 2, vgtitle.height/2);
			graphics.lineTo(0, vgtitle.height/2);
			graphics.lineTo(0, unscaledHeight);
			graphics.lineTo(unscaledWidth, unscaledHeight);
			graphics.lineTo(unscaledWidth, vgtitle.height/2);
			graphics.lineTo(vgtitle.x + vgtitle.width + 2, vgtitle.height/2);
			
		}
		
		public function get title():String {
			return _title;
		}
		
		public function set title(value:String):void {
			_title = value;
		}
		
		public function get pad():int {
			return _pad;
		}
		
		public function set pad(value:int):void {
			_pad = value;
		}
		
		public function get pos():int {
			return _pos;
		}
		
		public function set pos(value:int):void {
			_pos = value;
		}
	}
}

 调用如下：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" 
			   xmlns:customgroup="test.*">
	<s:layout>
		<s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	
	<s:VGroup>
		<customgroup:MyVGroup title="文化程度">
			<s:HGroup>
				<s:CheckBox label="高中"/>
				<s:CheckBox label="初中"/>
			</s:HGroup>
			<s:HGroup>
				<s:CheckBox label="本科"/>
				<s:CheckBox label="大专"/>
			</s:HGroup>
			<s:HGroup>
				<s:CheckBox label="硕士"/>
				<s:CheckBox label="博士"/>
			</s:HGroup>
		</customgroup:MyVGroup>
	</s:VGroup>
</s:Application>

 最后看看结果，大家觉得有什么要改进的可以一起讨论讨论：

评论

2 楼 hello_player 2011-01-27  

，谢谢，可惜最近又没空去深入研究了，烦人的事情总是那么多。哎！

1 楼 damoqiongqiu 2011-01-07  

很好很强大，学习一下。