在很多时候我们需要一个带边框,有标题的容器,这个需要用自定义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动画作品,指的临摹,可以学习的东西
根据需求需要制作一颗树,多列显示,带有标头,支持多选绑定,另外带有一些选中、鼠标移动的效果
在网页制作过程中,尤其是使用ASP.NET技术进行开发时,标头的设计与实现是一个不可忽视的部分。 ASP.NET是一种强大的Web应用程序框架,由微软开发,它提供了丰富的功能来创建动态、交互式的网页。在ASP.NET中,网页...
DataGridView列标头带数据筛选功能(含C#源码DEMO)), 类似Excel筛选功能的 DataGridView 源代码,调用简单,功能好用,C#示例都有。筛选后状态栏显示过滤后的条数及显示全部的HPLINK标签按钮。
它基本上是一个带有粘性标头流布局的UICollectionView (此UICollectionView基于 ),并且所有视差效果都在applyLayoutAttributes:发生。 我从“ ”中添加了一些笑话,只是它更有趣一点:) 提神醒脑 取消刷新动画...
MinGW w32api 标头的替代 DirectX 标头w32api-directx-独立MinGW w32api 标头的替代 DirectX 标头。源自Wine和 MinGW-w64标头,可用于覆盖现有 MinGW 中包含的现有 DirectX 标头,例如,通过-isystemGCC 选项。由于 ...
您必须手动实例化这些模板,并且通常您希望使用自己的界面包装一个或多个模板以构建实用的数据结构。 Pottery是用C11,gnu89和C ++ 11的超便携式交集编写的现代C代码,没有强制性的依赖关系(甚至没有libc。)...
1. HTML 结构:首先,我们需要在HTML中创建一个包含所有导航元素的容器,如logo、菜单按钮等,并为其设置固定定位(fixed)。 2. CSS3 动画:使用CSS3的transition和transform属性,我们可以为 AnimatedHeader 设计...
综上所述,这个压缩包是一个包含多种企业网站FLASH标头资源的集合,提供了源码和示例文件,方便设计师或开发者根据需要自定义或学习。由于FLASH技术在现代网页设计中逐渐被HTML5等更现代的技术取代,了解和使用这些...
1. 数据结构设计:创建一个包含两个字段的数据模型,一个是实际的列表项内容,另一个是该条目所属的分段标头。例如,可以创建一个`List Item`类,包含`name`(用于显示在列表中的内容)和`section`(表示该条目对应...
这可以通过使用`GridViewColumn.HeaderTemplate`属性来完成,其中可以添加一个`TextBlock`或其他UI元素,并调整其旋转角度以实现垂直显示。 2. **使用变换(Transform)**:在自定义的列头模板中,我们可以应用一个...
7. **文件格式RAR**:RAR是一种常见的压缩文件格式,可以将多个文件打包成一个单一的文件,便于存储和传输。在这个例子中,RAR文件包含了所有与A贴标机出标头相关的3D设计和工程图纸。 综上所述,这个压缩包内容...
标题提到的“DataGridView列标头带数据筛选功能”就是这样的一个需求,它允许用户快速过滤数据显示,只显示符合特定条件的行。 要实现这个功能,我们可以分为以下几个步骤: 1. **创建自定义列头**: 首先,我们...
具体表现为,当尝试使用JavaScript库(如xlsx.js)将Excel数据加载到HTML表格时,在谷歌和火狐浏览器中能够正常显示数据,但在IE11浏览器中却无法正确显示,并且会抛出错误“HTML1114 (HTTP 标头)的代码页 gb2312 ...
在网页设计中,"table标头固定 列固定"是一个常见的需求,特别是在处理大量数据时,用户需要能够方便地查看和对比表格中的信息。这种设计方法使得表格的表头(thead)在滚动时始终保持可见,而列(列宽)也会在页面...
1、通过设置图像列表(CImageList类),在列表控件插入时设置每行图标; 2、通过GetHeaderCtrl函数获取列表的标头控件,并设置标头上的图标; 3、通过单击标头改变标头上的三角号方向。
在Ruby on Rails应用程序中,服务器时间标头是一个重要的性能监控工具。它允许开发者了解服务器处理请求所需的时间,从而帮助优化应用程序的性能。Rails框架默认并未开启服务器时间标头,但可以通过一些配置或第三方...
/include/directx这些文件是使用 D3D12 的核心头文件,加上 d3dx12.h,它是一个辅助程序,不会跨越 D3D12 API 的界限。/include/wsl这些文件作为填充程序提供,以便能够包含来自 Linux 构建环境的 D3D12 标头,而不...