如何在Flex中保持纯MXML的布局和纯皮肤的样式

Question

我正在尝试在Flex 4中实现一些mvc风格的UI组件。我想进一步分离每个元素的可视化设置(以及以后的运行时修改)。首先，我想在MXML文件中保持数据的总体布局，使用皮肤:

<s:Group id="container">
    <s:VGroup>
        <s:HGroup id="titleGroup">
            <s:Label id="titleText" />
            <s:Button id="closeButton" />
        </s:HGroup>
        <s:HGroup id="contentGroup">
            <s:VGroup id="interactionGroup">
                <s:VGroup id="messageGroup" />
                <s:HGroup id="actionGroup" />
            </s:VGroup>
        </s:HGroup>
    </s:VGroup>
</s:Group>

在皮肤文件中，我希望能够引用id并设置它们的属性(例如"容器"组上的宽度和高度)，并且能够在其中包含图形元素(例如"容器"组内的填充矩形)。我想以声明的方式，而不是以编程的方式来完成，否则为什么要使用MXML呢?这是HTML/CSS的划分方式:HTML包含数据与其他数据的关系，CSS包含所有的属性和视觉样式。

现在，我的皮肤是这样的:

<s:Group id="container" verticalCenter="0" horizontalCenter="0">
    <s:Rect id="background" width="100%" height="100%" radiusX="10" radiusY="10">
        <s:filters>
            <s:DropShadowFilter blurX="20" blurY="20" alpha="0.32" distance="5" angle="90" />
        </s:filters>
        <s:fill>
            <s:SolidColor color="#ffffff" />
        </s:fill>
    </s:Rect>
    <s:VGroup width="100%" height="100%" gap="3" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
        <s:HGroup id="titleGroup" width="100%" verticalAlign="middle">
            <s:Label id="titleText" width="100%" />
            <s:Button id="closeButton" />
        </s:HGroup>
        <s:HGroup id="contentGroup" width="100%">
            <s:VGroup id="interactionGroup" width="100%">
                <s:VGroup id="messageGroup" width="100%" />
                <s:HGroup id="actionGroup" width="100%" />
            </s:VGroup>
        </s:HGroup>
    </s:VGroup>
</s:Group>

而实际使用这个皮肤的组件只不过是SkinPart声明:

<fx:Script>
    <![CDATA[
        import spark.components.Label;
        import spark.components.Button;
        import spark.components.Group;
        [SkinPart(required="true")]
        public var titleText:Label;
        [SkinPart(required="true")]
        public var closeButton:Button
        [SkinPart(required="true")]
        public var messageGroup:Group;
        [SkinPart(required="true")]
        public var actionGroup:Group;
    ]]>
</fx:Script>

如您所见，Skin包含了关于组件的所有内容，违背了我将样式和内容分开的原则。using元素中除了用于编程更改的到皮肤的接口之外没有任何内容。我目前的解决方案与不使用皮肤相比没有任何优势，除了切换皮肤的过程稍微容易一些。

是否有一种方法来做我在Flex 4中提出的?

Answer 1

答案是Flex不是这样工作的。布局和视觉风格似乎是不可分割的联系。结束这个问题