Question

我正在阅读TourDeFlex中的一个示例源（带图标的按钮），我发现很难理解皮肤层。

请参阅 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，这很好。

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

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

如何理解弹性皮肤层？

1 个答案: