探索 Flex 和 CSS 的强大功能

核心提示： 设置 MXML 组件标签上的样式属性的一条经验是，只有在知道所设置的样式值特定于该组件的情况下才以这种方式设置此属性，探索 Flex 和 CSS 的强大功能(5)，比方说，您的应用程序要求一个容器能够垂直堆叠显示对象而不在其间留空隙，只有在需要的时候才使用它，清单 3 提供了嵌入样式声明的一个例

设置 MXML 组件标签上的样式属性的一条经验是，只有在知道所设置的样式值特定于该组件的情况下才以这种方式设置此属性。比方说，您的应用程序要求一个容器能够垂直堆叠显示对象而不在其间留空隙。同时，您知道应用程序内的其他 VBox 容器则确实需要显示对象之间有空隙。在这种情况下，您应该在 VBox 组件的该实例上显式地设置 verticalGap 属性，如 清单 2 所示。

清单 2. 在 VBox 容器组件的这个实例上 verticalGap 被显式地设为 0

　　　
<mx:VBox　id="myVBox"　verticalGap="0"　
　x="15"　y="15"　width="100%"　height="100%">　
　　
(...)　
　　
</mx:VBox>　

在 MXML 内嵌入 CSS

该方法所涉及到的是用 <mx:Style/> 标签将样式或资源直接嵌入到一个 MXML 文件内。出于实用的目的，现在需要在其中直接将样式信息嵌入到 MXML 文件的实例很少。最重要的是要认识到如果应用程序包含很多被嵌入的 CSS，那么随着应用程序的增长，设计将越来越难以维护。认识到这一点，在使用这种方法时，要十分慎重，只有在需要的时候才使用它。清单 3 提供了嵌入样式声明的一个例子，该声明应该保留在一个外部 CSS 文件内以便获得更好的代码可维护性。

清单 3. 将样式直接嵌入到 MXML 应用程序文件内

　　　
<?xml　version="1.0"　encoding="utf-8"?>　
<mx:WindowedApplication　
　xmlns:mx="http://www.adobe.com/2006/mxml"　
　layout="absolute"　
　showFlexChrome="false"　
　borderStyle="none"　
　keyUp="{this.onKeyStrokeEvent(event);}">　
　
　
　<mx:Style>　
　.bGroup　{　
　　borderSides:"left,bottom,right";　
　　borderStyle:"solid";　
　　borderColor:#6d6f71;　
　　borderLeftThickness:3;　
　　borderRightThickness:3;　
　　borderBottomThickness:1;　
　　dividerColor:#6d6f71;　
　　dividerThickness:3;　
　}　
　</mx:Style>　
　
　<mx:Script>　
　<![CDATA[　
　　
　　(...)