Flex 4. 重复输出我的组件答案

【问题标题】：Flex 4. Output my component repeatedlyFlex 4. 重复输出我的组件
【发布时间】：2016-07-14 13:42:37
【问题描述】：

我创建了一个皮肤：

<s:Group id="brick">
    <s:Rect width="40" height="20">
      <s:fill>
        <s:SolidColor color="{hostComponent.colorBrick}" />
      </s:fill>
    </s:Rect>
    <s:Rect width="40" height="20">
      <s:stroke>
        <s:SolidColorStroke color="#000000" />
      </s:stroke>
    </s:Rect>    
  </s:Group>

如何多次携带此组件？

这是一块砖。我要建墙。

【问题讨论】：

标签： flex4 skin

【解决方案1】：

您可以使用循环多次创建同一个组件。这是你的皮肤 BrickSkin.mxml：

<?xml version="1.0"?>

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Metadata>
<![CDATA[
    [HostComponent("Brick")]
    ]]>
</fx:Metadata>
<fx:Script>
    <![CDATA[

    ]]>
</fx:Script>
<s:states>
    <s:State name="normal"/>
    <s:State name="disabled"/>
</s:states>
<s:Group id="brick">
    <s:Rect width="40" height="20">
        <s:fill>
            <s:SolidColor id="solidColor" />
        </s:fill>
    </s:Rect>
    <s:Rect width="40" height="20">
        <s:stroke>
            <s:SolidColorStroke color="#000000" />
        </s:stroke>
    </s:Rect>
</s:Group>
</s:Skin>

这是您的 Brick 组件 Brick.as：

package {
import flash.events.Event;

import mx.graphics.SolidColor;

import spark.components.SkinnableContainer;

public class Brick extends SkinnableContainer{
public function Brick() {
    super();
}
[SkinPart(required="true")]
public var solidColor:SolidColor;

override protected function partAdded(partName:String, instance:Object):void {
    super.partAdded(partName, instance);
    if(instance == solidColor)
    {
        solidColor.color = colorBrick;
    }
}

[Bindable]
private var _colorBrick:uint;
[Bindable(event="colorBrickChanged")]
public function get colorBrick():uint {
    return _colorBrick;
}

public function set colorBrick(value:uint):void {
    if (_colorBrick == value) return;
    _colorBrick = value;
    dispatchEvent(new Event("colorBrickChanged"));
    invalidateProperties();

}

override protected function commitProperties():void {
    super.commitProperties();
    if(solidColor)
        solidColor.color = colorBrick;

}
}
}

您可以创建 BrickCSS.css 如下：

@namespace local "*";

local|Brick {
skinClass: ClassReference("BrickSkin");
}

这是您的 Main.mxml：

<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark" 
           width="100%"
           height="100%"
           creationComplete="{buildWall()}">
<fx:Style source="BrickCSS.css"/>
<fx:Script><![CDATA[
    private function buildWall():void
    {
        for(var i = 0; i < 200; i++)
        {
            var brick:Brick = new Brick();
            brick.colorBrick = 0xFF0000;
            tileGroup.addElement(brick);
        }
    }
    ]]></fx:Script>
<s:TileGroup id="tileGroup"  width="20%" height="90%" verticalCenter="0" horizontalCenter="0" horizontalGap="0" verticalGap="0" />
</s:Application>

这是输出快照。

【讨论】：