在很多时候我们需要一个带边框,有标题的容器,这个需要用自定义skin来做.
其实就是用遮罩层mask来做的。话不多说,直接来代码吧
Main.mxml
<?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:component="com.component.*"> <s:layout> <s:HorizontalLayout horizontalAlign="center"/> </s:layout> <component:TitleGroup title="Title Group title name" width="400" height="600"> <component:layout> <s:VerticalLayout horizontalAlign="center"/> </component:layout> <s:Label text="This is the content."/> <s:Label text="This is the content."/> <s:Label text="This is the content."/> <s:Label text="This is the content."/> </component:TitleGroup> </s:Application>
TitleGroup.mxml
<?xml version="1.0" encoding="utf-8"?> <s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" skinClass="com.component.skin.TitleGroupSkin"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Script> <![CDATA[ import spark.components.CheckBox; import spark.components.Label; [SkinPart(required="true")] public var titleDisplay:Label; [SkinPart(required="true")] public var enabledCheckBox:CheckBox;//这个纯粹是让你们了解下稍微复杂点的标头的设计。比如加上一个checkbox private var _title:String; private var customTitleChanged:Boolean = false; public function set title(value:String):void { this._title = value; this.customTitleChanged = true; invalidateProperties(); } public function get title():String { return this._title; } private var _allowGroupStatusControl:Boolean; private var allowGroupStatusControlChanged:Boolean = false; public function set allowGroupStatusControl(value:Boolean):void { this._allowGroupStatusControl = value; allowGroupStatusControlChanged = true; invalidateProperties(); } private var _titleGroupSelected:Boolean = false; private var titleGroupSelectedChanged:Boolean = false; public function set titleGroupSelected(value:Boolean):void { this._titleGroupSelected = value; titleGroupSelectedChanged = true; invalidateProperties(); } override protected function commitProperties():void { super.commitProperties(); if(titleDisplay != null && this.customTitleChanged) { titleDisplay.text = this._title; this.customTitleChanged = false; } if(enabledCheckBox != null && allowGroupStatusControlChanged) { enabledCheckBox.visible = enabledCheckBox.includeInLayout = this._allowGroupStatusControl; titleDisplay.visible = titleDisplay.includeInLayout = !this._allowGroupStatusControl; allowGroupStatusControlChanged = false; contentGroup.enabled = false; } if(titleGroupSelectedChanged && enabledCheckBox && contentGroup) { contentGroup.enabled = enabledCheckBox.selected = this._titleGroupSelected; titleGroupSelectedChanged = false; } } override protected function partAdded(partName:String, instance:Object):void { super.partAdded(partName,instance); if(instance == enabledCheckBox) { enabledCheckBox.label = this.title; enabledCheckBox.addEventListener(flash.events.Event.CHANGE,callback); } function callback(evt:Event):void { if(enabledCheckBox.selected) { contentGroup.enabled = true; } else { contentGroup.enabled = false; } dispatchEvent(new Event("titleGroupStatusChanged")); } } public function get titleGroupEnabled():Boolean { return contentGroup.enabled; } ]]> </fx:Script> <fx:Metadata> [Event(type="flash.events.Event",name="titleGroupStatusChanged")] </fx:Metadata> </s:SkinnableContainer>
TitleGroupSkin.mxml
<?xml version="1.0" encoding="utf-8"?> <!-- ADOBE SYSTEMS INCORPORATED Copyright 2008 Adobe Systems Incorporated All Rights Reserved. NOTICE: Adobe permits you to use, modify, and distribute this file in accordance with the terms of the license agreement accompanying it. --> <!--- The default skin class for a Spark SkinnableContainer container. @see spark.components.SkinnableContainer @langversion 3.0 @playerversion Flash 10 @playerversion AIR 1.5 @productversion Flex 4 --> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5"> <fx:Metadata> <![CDATA[ /** * @copy spark.skins.spark.ApplicationSkin#hostComponent */ [HostComponent("spark.components.SkinnableContainer")] ]]> </fx:Metadata> <s:states> <s:State name="normal" /> <s:State name="disabled" /> </s:states> <!--定义一个遮罩层,遮罩层的地方都可以被看到--> <s:Group id="borderGroupMask" left="0" right="0" top="0" bottom="0"> <s:Rect left="0" width="7" top="0" bottom="0"> <s:fill> <s:SolidColor color="#ff0000" alpha="1"/> </s:fill> </s:Rect> <s:Rect left="7" width="{titleGroup.width+4}" top="30" bottom="0"> <s:fill> <s:SolidColor color="#00ff00" alpha="1"/> </s:fill> </s:Rect> <s:Rect left="{titleGroup.width + 11}" width="100%" top="0" bottom="0"> <s:fill> <s:SolidColor color="#0000ff" alpha="1"/> </s:fill> </s:Rect> </s:Group> <!--- Defines the appearance of the SkinnableContainer class's background. --> <s:Rect left="0" top="5" right="0" width="100%" height="100%" mask="{borderGroupMask}" topLeftRadiusX="6" topRightRadiusX="6" bottomLeftRadiusX="6" bottomRightRadiusX="6"> <s:stroke> <s:SolidColorStroke color="#D8D8D8" scaleMode="none"/> </s:stroke> </s:Rect> <!--- @copy spark.components.SkinnableContainer#contentGroup --> <s:BorderContainer id="titleGroup" left="10" top="0" borderAlpha="0" backgroundAlpha="0" minWidth="20" height="{titleDisplay.height}"> <s:layout> <s:HorizontalLayout verticalAlign="middle" gap="2" paddingLeft="6" paddingRight="6"/> </s:layout> <s:CheckBox id="enabledCheckBox" includeInLayout="false" visible="false"/> <s:Label id="titleDisplay" fontSize="14"/> </s:BorderContainer> <s:Group id="contentGroup" left="0" right="0" top="15" bottom="0" minWidth="0" minHeight="0"> <s:layout> <s:VerticalLayout paddingTop="6" paddingLeft="6" paddingRight="6" paddingBottom="6"/> </s:layout> </s:Group> </s:Skin>
效果图:
相关推荐
flash动画作品,指的临摹,可以学习的东西
解决跨域访问-需要设置HTTP响应标头设置
它基本上是一个带有粘性标头流布局的UICollectionView (此UICollectionView基于 ),并且所有视差效果都在applyLayoutAttributes:发生。 我从“ ”中添加了一些笑话,只是它更有趣一点:) 提神醒脑 取消刷新动画...
DataGridView列标头带数据筛选功能(含C#源码DEMO)), 类似Excel筛选功能的 DataGridView 源代码,调用简单,功能好用,C#示例都有。筛选后状态栏显示过滤后的条数及显示全部的HPLINK标签按钮。
您必须手动实例化这些模板,并且通常您希望使用自己的界面包装一个或多个模板以构建实用的数据结构。 Pottery是用C11,gnu89和C ++ 11的超便携式交集编写的现代C代码,没有强制性的依赖关系(甚至没有libc。)...
可以在DataGridView的列标头中添加一个控件类似于Excel的自动筛选数据功能……
可以利用SOAP标头实现WebService自定义安全机制
devexpress表格控件gridcontrol实现纵向标头,在官网中找到一些案例整理给大家分享
重写DataGridView,在标头添加复选框,实现列中的复选框全选和反选
1、通过设置图像列表(CImageList类),在列表控件插入时设置每行图标; 2、通过GetHeaderCtrl函数获取列表的标头控件,并设置标头上的图标; 3、通过单击标头改变标头上的三角号方向。
在该Demo中,有一个分段标头(section header)随列表滚动,当前分段标头一直显示在屏幕顶端。在下图中,突出显示的字母就是分段标头,其下方的列表项显示首字母与分段标头相同的国家。
上传excel表,将excel数据内容加载到页面table上,谷歌、火狐浏览器正常显示,IE11浏览器不显示加载的数据,报错:HTML1114 (HTTP 标头)的代码页 gb2312 覆盖(META 标记)的冲突的代码页 utf-8
android一个简单易用,能自定义,带title的viewpager,指示器能跟着title的内容大小进行变换
secureheaders, 管理安全标头的应用,具有许多安全默认值 安全标头 master代表 5.x 行 。 请参见升级到 4.x doc 和升级到 5.x doc了解如何升级。 Bug 修复程序现在应该在 3.x 分支中。3.x 分支正在进入维护模式 。 ...
开发Web项目过程中会遇到在table中画斜线的情况. 例如: 成绩和学员之间在一个td中, 需要用斜线来隔开. 自己下载试试吧
DataGridView列标头带数据筛选功能(含VB.NET源码DEMO)), 类似Excel筛选功能的 DataGridView 源代码,调用简单,功能好用,VB.NET示例都有。筛选后状态栏显示过滤后的条数及显示全部的HPLINK标签按钮。
包 FakeEventGenerator 生成两个不同的事件,一个带有 <key> 标头的虚拟事件,它将通过带有自定义拦截器的第二个包丰富,称为 FeederInterceptor。馈线拦截器初始事件(就标题中的信息数据而言的不良事件)将在地图...
推荐企业网站FLASH标头
网页标头,很好的资料,大家一起分享
#多行多列带标头能翻页的TableView##需求在游戏中需要实现如下效果这个特征如下:带标头,每个标头对应一个种类,每个种类可以有无数项,但是显示的时候每次只显示一部分,每次显示的这部分称为一页,一个种类可以有...