flex_4_样式与布局小结

《flex_4_样式与布局小结》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、Flex4样式与布局第一篇Flex4与自定义布局（Layout）Flex4/Spark组件架构的新功能之一是可以定制一个容器的布局而不必改变容器本身。您需要做的就是定义一个自定义布局。Flex4/Spark架构中的容器并不控制它们自己的布局。相反，每种容器具有一个布局属性，用于确定如何在屏幕上设置子元素的布局。可以使用一个单独的Group容器，并赋予其一个垂直布局、水平布局或平铺布局，这取决于您将如何创建它。代码很简单，如下所示：不过真正的好处在于您不

2、必局限于框架中定义的默认布局。您可以轻松定制BaseLayout类来实现自己定制的布局逻辑。（参考文章：Flex4与自定义布局：译文：http://blog.csdn.net/lihe111/archive/2009/07/

3、06/4325571.aspx原文：http://insideria.com/2009/05/flex-4-custom-layouts.html）第二篇Flex4SkinClass改变组件外观在Flex4中，SkinClass指向的文件通常用一个使用s:skin标签（或者sparkskin）的MXML文件进行定义。通过skinclass来改变外观的spark组件通常也是skinclass引用的Hostcomponent。Flex4中新的改变外观架构可以在很大的程度上将组件和组件的外观设计分开，这样组件外观设计的代码通过改变小部分

4、的代码就可以得到重用了。一、SkinClass必须包含的三样东西：1、HostComponentmetadataSkinClass文件需要引用HostComponent对象，而HostComponent是指需要改变外观的组件。我们可以通过metadata标签来指定HostComponent。如：我们需要设置Button的外观，那么Button就是HostComponent。 Code：1.2.

5、>5.2、States如果HostComponent中有SkinState（一般用metadata标签来声明），例如：s:ButtonBase中包含了1.[SkinState("up")]那么在相应的skinclassmxml文件中必须有如下相应的state：1.2.1、SkinpartsHostComponent中的属性可以被定义为必须或者是可选的部分（skinparts），可选的属性一般通过metadata标签将其默认设置为false。如果s

6、:ButtonBase中包含一下的属性：[SkinPart(required="false")]publicvarlabelDisplay:TextBase;那么，skin文件应该包含一下相应的声明：二、SkinClass的使用方法：（skins.CustomApplicationSkin为Skinclass指向的mxml文件路径）1、属性引用：

7、://ns.adobe.com/mxml/2009"xmlns:s="library://ns.adobe.com/flex/spark"xmlns:mx="library://ns.adobe.com/flex/halo"skinClass="skins.CustomApplicationSkin">2、CSS引入：@namespaces"library://ns.adobe.com/flex/spark";s

8、Application{skinClass:ClassRefere

9、nce("skins.CustomApplicationSkin");}3、AS代码指定，比较适合动态皮肤。