我正在尝试在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中提出的方案?
发布于 2011-11-24 03:06:35
答案是Flex不是这样工作的。布局和视觉样式似乎密不可分。结束这个问题。
https://stackoverflow.com/questions/8128743
复制相似问题