如何在 Flex 中保持布局纯粹在 MXML 中，样式纯粹在 Skin 中？

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>

并且在皮肤文件中，我希望能够引用 ids 并设置它们的属性（例如宽度和“容器”组的高度）并且能够在其中包含图形元素（例如“容器”组内的填充矩形）。我想以声明方式而不是以编程方式执行此操作，否则为什么首先要使用 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 不是这样工作的。布局和视觉风格似乎是密不可分的。结束这个问题。