如何理解弹性皮肤层？

Question

我正在阅读TourDeFlex中的一个示例源（Button With Icon），我发现很难理解皮肤层。

查看TDFPanelSkin.mxml的代码：

<s:states>
    <s:State name="normal" />
    <s:State name="disabled" />
    <s:State name="normalWithControlBar" />
    <s:State name="disabledWithControlBar" />
</s:states>

<!-- drop shadow -->
<s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11" 
                         angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>

<!-- layer 1: border -->
<s:Rect left="0" right="0" top="0" bottom="0">
    <s:stroke>
        <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
    </s:stroke>
</s:Rect>


<!-- layer 2: background fill -->
<!-- This layer was modified for Tour de Flex samples to have a gradient border at the bottom. -->
<s:Rect left="0" right="0" bottom="0" height="15">
    <s:fill>
        <s:LinearGradient rotation="90">
            <s:GradientEntry color="0xE2E2E2" />
            <s:GradientEntry color="0x000000" />
        </s:LinearGradient>
    </s:fill>
</s:Rect>

您可以在评论中看到，有“第1层”和“第2层”。

它只是一个面板，为什么有层？ 一个组件可以有多少层？ 哪里知道一层应该有什么？

Answer 1

简短的回答是：

图层只是思考Spark皮肤的一种有用方式。 它们不是严格要求的，也不限制您可以拥有的数量。 存在图层的原因是因为它允许您以类似于Photoshop之类的应用程序的方式构建组件的视觉外观。 它还允许根据组件的状态对组件的外观进行细粒度控制。

答案很长的答案是：

RectangularDropShadow是一个投影，它将出现在被蒙皮的组件下方。 最重要的是，将绘制一个具有实线笔划的Rect 。 最重要的是，将绘制一个带有线性渐变的Rect 。

通常，这些层完全是可视的，并且由您的应用程序设计决定。 根据我的经验，我收到了来自设计师的Photoshop文档，其中的按钮可以在多层上构建，具有不同的混合模式和填充和笔触等等。 分层皮肤允许实际的Spark皮肤（大多数）匹配源PSD，这是很好的。

分层皮肤的另一个好处是，您可以根据皮肤状态轻松调整图层。 一个常见的例子是将组件置于“禁用”状态。 您将看到您的示例在顶部声明了四个状态，其中一个状态为“已禁用”。 通过向“背景填充”中使用的LinearGradient添加alpha.disabled="0.5"属性，可以在禁用时将面板更新为半透明。

我开始使用Spark时，我在Spark Skinning上使用了Adobe文档。