首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在Flex中保持纯MXML的布局和纯皮肤的样式?

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

Stack Overflow用户
提问于 2011-11-15 05:56:24
回答 1查看 223关注 0票数 0

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

代码语言:javascript
运行
复制
<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>

在皮肤文件中,我希望能够引用I并设置它们的属性(例如“容器”组中的宽度和高度),并能够在其中包含图形元素(例如“容器”组中的填充矩形)。我想以声明的方式来做这件事,而不是以编程的方式,否则为什么要首先使用MXML呢?这就是HTML/CSS的划分方式: HTML包含数据相对于其他数据的内容,而CSS包含所有属性和视觉样式。

现在,我的皮肤看起来像这样:

代码语言:javascript
运行
复制
<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声明:

代码语言:javascript
运行
复制
<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>

正如您所看到的,皮肤包含有关组件的所有内容,这违背了我将样式和内容分开的感觉。除了用于编程更改的皮肤的接口外,using元素中没有任何内容。与不使用皮肤相比,我目前的解决方案没有任何优势,只是换出皮肤的过程稍微简单一些。

有没有办法实现我在Flex4中提出的方案?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-11-24 03:06:35

答案是Flex不是这样工作的。布局和视觉样式似乎密不可分。结束这个问题。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/8128743

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档