Flex_4_样式与布局小结.docVIP

Flex 4 样式与布局 第一篇 Flex 4 与自定义布局（Layout） Flex 4/Spark组件架构的新功能之一是可以定制一个容器的布局而不必改变容器本身。您需要做的就是定义一个自定义布局。 Flex 4/Spark架构中的容器并不控制它们自己的布局。相反，每种容器具有一个布局属性，用于确定如何在屏幕上设置子元素的布局。可以使用一个单独的Group容器，并赋予其一个垂直布局、水平布局或平铺布局，这取决于您将如何创建它。代码很简单，如下所示： 不过真正的好处在于您不必局限于框架中定义的默认布局。您可以轻松定制BaseLayout类来实现自己定制的布局逻辑。 （参考文章：Flex 4与自定义布局： 译文：/lihe111/archive/2009/07/06/4325571.aspx 原文：/2009/05/flex-4-custom-layouts.html ） 第二篇 Flex 4 SkinClass 改变组件外观 在Flex 4中，SkinClass指向的文件通常用一个使用s:skin标签（或者sparkskin）的MXML文件进行定义。通过skinclass来改变外观的spark组件通常也是skinclass引用的Host component。Flex 4 中新的改变外观架构可以在很大的程度上将组件和组件的外观设计分开，这样组件外观设计的代码通过改变小部分的代码就可以得到重用了。 一、SkinClass必须包含的三样东西： HostComponent metadata SkinClass文件需要引用HostComponent对象，而HostComponent是指需要改变外观的组件。我们可以通过metadata标签来指定HostComponent。如：我们需要设置Button的外观，那么Button就是HostComponent。? Code： fx:Metadata ![CDATA[ [HostComponent(ponents.Button)] ]] /fx:Metadata States 如果HostComponent中有SkinState（一般用metadata标签来声明），例如： s: ButtonBase中包含了 [SkinState(up)] 那么在相应的skinclass mxml文件中必须有如下相应的state： 1. s:states s:State name=up/ Skin parts HostComponent中的属性可以被定义为必须或者是可选的部分（skin parts），可选的属性一般通过metadata标签将其默认设置为false。如果s:ButtonBase中包含一下的属性： 那么，skin文件应该包含一下相应的声明： 二、SkinClass的使用方法： （skins.CustomApplicationSkin 为Skinclass指向的mxml文件路径） 1、属性引用： 2、CSS引入： 3、AS代码指定，比较适合动态皮肤。 三、示例 见word文档 《Flex 4 skinclass 简单示例》 第三篇 Flex 4 CSS Flex 4 对CSS做了很大的改进，虽然还不能像HTML那样随心所欲，但是也能满足任何项目的要求了。 Flex 不支持使用层叠样式表 (CSS) 来控制组件的所有可视方面。属性, 比如 x, y, width 和 height 是 UIComponent 类的属性, 而不是其样式, 因此, 无法在 CSS 中进行设置。您还必须知道您的主题支持哪些属性。Flex 中的默认主题并不支持所有样式属性。 在 Flex 中应用样式有许多方法。 某些样式提供更多粒度控制并能以编程方式被执行。其他样式不像那么灵活, 但可能需要较少的计算 一、设置样式的几种方式 使用本地样式定义 使用外部样式表 使用样式 :Button id=myButton fontSize=15 label=My Button/ 使用 setStyle() 方法 二、Flex CSS样式设置 详细见文档：《FLEX 4 CSS样式设置例》 1、四种基本的选择方式： 1）Type 例如：s|Button{ color: #FFFFFF; } 适合任意一个Button的实例。 2）Universal 例如：* { fontWeight: bold; } （注意要加上*号） 对程序中所有组件的字体都有效。 3）Class：由组件的stylename属性引用 例如：.rounded { cornerRadius: 10;｝ 则引用为：s:Button styleName=rounded label=Here be a Button/