Flex 4:建立一个有背景的小组
我正在尝试构建一个扩展spark.components.Group以具有背景颜色的简单组件,更具体地说是一个拉伸以填充背景的spark.primitives.Rect组件。
这就是我到目前为止所想到的:
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"
<fx:Metadata>
[DefaultProperty(name="content")]
</fx:Metadata>
<s:Rect id="background" width="100%" height="100%">
<s:fill>
<s:SolidColor color="#990000"/>
</s:fill>
</s:Rect>
<s:Group id="container"/>
<s:filters>
<!-- For good measure ;) -->
<s:DropShadowFilter color="#000000" strength="0.4" blurX="5" blurY="5" distance="2" angle="90"/>
</s:filters>
<fx:Script>
<![CDATA[
public function set content(value:Array):void {
this.container.mxmlContent = value;
}
]]>
</fx:Script>
</s:Group>
好的,所以这里的逻辑基本上是有道理的,对吧? MXML 中声明的所有子项都会进入称为“容器”的组。效果很好。但是,当我运行下面的示例时,布局完全是错误的。
<s:VGroup>
<!-- This is the component described above -->
<components:MessageContainer id="component" width="100" height="100"/>
<mx:Slider/>
<mx:Slider/>
<mx:ColorPicker/>
</s:VGroup>
它看起来像这样:
我在这里缺少什么吗?也许我需要重写一个方法?
I'm trying to build a simple component extending spark.components.Group to have a background color, more specifically a spark.primitives.Rect component stretched to fill the background.
This is what I've come up with thus far:
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"
<fx:Metadata>
[DefaultProperty(name="content")]
</fx:Metadata>
<s:Rect id="background" width="100%" height="100%">
<s:fill>
<s:SolidColor color="#990000"/>
</s:fill>
</s:Rect>
<s:Group id="container"/>
<s:filters>
<!-- For good measure ;) -->
<s:DropShadowFilter color="#000000" strength="0.4" blurX="5" blurY="5" distance="2" angle="90"/>
</s:filters>
<fx:Script>
<![CDATA[
public function set content(value:Array):void {
this.container.mxmlContent = value;
}
]]>
</fx:Script>
</s:Group>
Ok, so the logic here basically makes sense, right? All children declared in MXML go to the Group called "container". That is working just fine. However, when I run the example below, the layout is completely fubar.
<s:VGroup>
<!-- This is the component described above -->
<components:MessageContainer id="component" width="100" height="100"/>
<mx:Slider/>
<mx:Slider/>
<mx:ColorPicker/>
</s:VGroup>
This is what it looks like:
Is there something I'm missing here? Maybe a method I need to override?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
诡异的。我只是诉诸于制作 Skin 实现并将其应用到 SkinnableContainer。我也使用 Flex 4 的 Beta 2 版本进行编译。确实很奇怪。
Weird. I just resorted to making a Skin implementation and applying it to a SkinnableContainer. I was compiling using the Beta 2 release of Flex 4 as well. Very strange indeed.
您使用的是哪种版本的 Flex 4?我刚刚完全复制了您的代码,输出看起来正如您所期望的那样。
我正在运行过去几周内发布的 beta 2 版本。内部版本 4.0.0.253292。如果您没有运行最新版本,您可以升级您的版本,但您也可以尝试清理项目。它可能只是变得困惑。还要确保您的浏览器没有缓存 swf,当文件大小没有发生显着变化时,有时会发生这种情况。
What build of flex 4 are you using? I just copied your code exactly and the output looks as you would expect it to.
I am running the beta 2 build that was released within the last few weeks. Build 4.0.0.253292. You can upgrade your build if you aren't running the latest, but you can also try to clean the project. It might just be getting confused. Also make sure your browser isn't caching the swf, which sometimes happens when the file size doesn't change dramatically.