如何在Flex中保持纯MXML的布局和纯皮肤的样式？
如何在Flex中保持纯MXML的布局和纯皮肤的样式？
提问于 2011-11-15 05:56:24
我正在尝试在Flex4中实现一些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>在皮肤文件中，我希望能够引用I并设置它们的属性(例如“容器”组中的宽度和高度)，并能够在其中包含图形元素(例如“容器”组中的填充矩形)。我想以声明的方式来做这件事，而不是以编程的方式，否则为什么要首先使用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>正如您所看到的，皮肤包含有关组件的所有内容，这违背了我将样式和内容分开的感觉。除了用于编程更改的皮肤的接口外，using元素中没有任何内容。与不使用皮肤相比，我目前的解决方案没有任何优势，只是换出皮肤的过程稍微简单一些。
有没有办法实现我在Flex4中提出的方案？
回答 1
Stack Overflow用户
回答已采纳
发布于 2011-11-24 03:06:35
答案是Flex不是这样工作的。布局和视觉样式似乎密不可分。结束这个问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8128743
复制相关文章
相似问题
腾讯云开发者
