好久没有写点东西了,最近接到 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>
最后看看结果,大家觉得有什么要改进的可以一起讨论讨论: