Flex SkinnableContainer类
介绍
SkinnableContainer类是具有可视内容的所有可Skinnable容器的基类。
类声明
以下是 spark.components.SkinnableContainer 类的声明:
public class SkinnableContainer
extends SkinnableContainerBase
implements IDeferredContentOwner, IVisualElementContainer
公共属性
| S.N. | 属性和描述 |
|---|---|
| 1 | autoLayout:Boolean 如果为true，则当孩子的位置或大小改变时，进行测量和布局。 |
| 2 | creationPolicy:String 此组件的内容创建策略。 |
| 3 | deferredContentCreated:Boolean [只读]如果已创建延迟内容，则包含true。 |
| 4 | layout:LayoutBase 此容器的布局对象。 |
| 5 | mxmlContent:Array [只写]此组的可视内容子项。 |
| 6 | mxmlContentFactory:IDeferredInstance [write-only]为内容属性创建初始值的工厂对象。 |
| 7 | numElements:int [只读]此容器中的可视元素的数量。 |
公共方法
| S.N. | 方法和描述 |
|---|---|
| 1 | SkinnableContainer() 构造函数。 |
| 2 | addElement(element:IVisualElement):IVisualElement 向此容器添加可视元素。 |
| 3 | addElementAt(element:IVisualElement，index:int):IVisualElement 向此容器添加可视元素。 |
| 4 | createDeferredContent():void 创建此组件的内容。 |
| 5 | getElementAt(index:int):IVisualElement 返回指定索引处的视觉元素。 |
| 6 | getElementIndex(element:IVisualElement):int 返回视觉元素的索引位置。 |
| 7 | removeAllElements():void 从容器中删除所有可视元素。 |
| 8 | removeElement(element:IVisualElement):IVisualElement 从此容器的子列表中删除指定的可视元素。 |
| 9 | removeElementAt(index:int):IVisualElement 从容器中指定的索引位置删除视觉元素。 |
| 10 | setElementIndex(element:IVisualElement，index:int):void 更改可视容器中现有可视元素的位置。 |
| 11 | swapElements(element1:IVisualElement，element2:IVisualElement):void 交换两个指定可视元素的索引。 |
| 12 | swapElementsAt(index1:int，index2:int):void 在容器中的两个指定索引位置交换可视元素。 |
保护方法
| S.N. | 方法和描述 |
|---|---|
| 1 | createChildren():void [override]如果creationPolicy属性不等于none，则创建内容子节点。 |
| 2 | partAdded(partName:String，instance:Object):void [override]当添加皮肤部分时调用。 |
| 3 | partRemoved(partName:String，instance:Object):void [override]当皮肤部分的实例被删除时调用。 |
事件
| S.N. | 事件和描述 |
|---|---|
| 1 | contentCreationComplete 此组件的内容创建后分派。 |
| 2 | elementAdd 将视觉元素添加到内容持有者时分派。 |
| 3 | elementRemove 从内容持有者删除视觉元素时分派。 |
继承的方法
此类继承以下类中的方法:
spark.components.supportClasses.SkinnableContainerBase
mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
Object
Flex SkinnableContainer示例
让我们按照以下步骤通过创建测试应用程序来检查Flex应用程序中SkinnableContainer的使用:
| 步骤 | 描述 |
|---|---|
| 1 | 在 Flex - 创建应用程序章节中所述，在包 com.tutorialspoint.client 下创建名为 HelloWorld 的项目。 |
| 2 | 为 SkinnableContainerSkin 创建一个包含 com.tutorialspoint.skin 下的主机组件 SkinnableContainer / i>章。 保持文件的其余部分不变。 |
| 3 | 修改 HelloWorld.mxml ，如下所述。 保持文件的其余部分不变。 |
| 4 | 编译并运行应用程序，以确保业务逻辑按照要求工作。 |
以下是修改的mxml文件 src / com.tutorialspoint / skin / SkinnableContainerSkin.mxml 的内容。
<?xml version="1.0" encoding="utf-8"?>
<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:Rect left="0" right="0" top="0"
bottom="0" radiusX="5" radiusY="5">
<s:stroke>
<s:LinearGradientStroke weight="2"/>
</s:stroke>
<s:fill>
<s:LinearGradient rotation="90">
<s:entries>
<s:GradientEntry color="0xdddddd"/>
<s:GradientEntry color="0x020202" alpha=".5" />
</s:entries>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Group id="contentGroup" left="0" right="0"
top="0" bottom="0" minWidth="0" minHeight="0">
<s:layout>
<s:BasicLayout/>
</s:layout>
</s:Group>
</s:Skin>
以下是修改后的mxml文件 src / com.tutorialspoint / HelloWorld.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"
width="100%" height="100%" minWidth="500" minHeight="500"
>
<fx:Style source="/com/tutorialspoint/client/Style.css"/>
<s:BorderContainer width="630" height="480" id="mainContainer"
styleName="container">
<s:VGroup width="100%" height="100%" gap="50"
horizontalAlign="center" verticalAlign="middle">
<s:Label id="lblHeader" text="Layout Panels Demonstration"
fontSize="40" color="0x777777" styleName="heading"/>
<s:Panel id="skinnableContainerPanel" title="Using SkinnableContainer"
width="500" height="300" >
<s:layout>
<s:VerticalLayout gap="10" verticalAlign="middle"
horizontalAlign="center"/>
</s:layout>
<s:SkinnableContainer
skinClass="com.tutorialspoint.skin.SkinnableContainerSkin"
width="50%" height="50%" horizontalCenter="0"
verticalCenter="0">
<s:HGroup horizontalCenter="0" verticalCenter="0">
<s:BorderContainer width="50" height="50"
borderWeight="2" color="0x323232" />
<s:BorderContainer width="50" height="50"
borderWeight="2" color="0x323232" />
<s:BorderContainer width="50" height="50"
borderWeight="2" color="0x323232" />
</s:HGroup>
</s:SkinnableContainer>
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>
准备好所有更改后，让我们以正常模式编译和运行应用程序，就像在 Flex - 创建应用程序中一样 章节。 如果一切顺利，您的应用程序，这将产生以下结果:[在线试用]
