0

我正在阅读 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>

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

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

4

1 回答 1

2

简短的回答是：

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

长答案是：

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

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

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

I used the Adobe docs on Spark Skinning when I got started with Spark.

于 2012-07-27T16:41:47.053 回答