Flex小贴士：OpaqueBackground

早在我开始使用Flex时我就开发 flash 了，但是现在我花费在flex 应用 环境下的时间要比flash本身多的多。因此，我倾向于首先谈谈flex的功能并忽略所有原生UIComponent拥有的功能，并非由于它们是UIComponent，而是因为它们是DisplayObjects。

目前，我在开发一个List的子类，它使用了一个canvas，其中有2个label来作为itemRenderer。某些情况下，label太靠近滚动条了，以至于没有我期望的那样宽，造成里面的 文本 被截断了。为了找出是那个组件 没有正确的缩放，我需要查看每一个label、renderer、一部分 list 的尺寸，来确定renderer到底被绘制了多宽。

itemRenderer比较简单-它继承自Canvas，它有一个backgroundColor属性。 但是对于listContent和labels呢？ 它们有一个继承自DisplayObject的属性，opaqueBackground，允许你指定一个颜色来作为背景，甚至是那些没有 backgroundColor属性的component也适用。

比如，这段 代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
        <mx:Label text="Label" fontWeight="bold" fontSize="12" color="#FFFFFF" width="25%" opaqueBackground="0"/>
        <mx:Label text="Label" fontWeight="bold" fontSize="12" color="#FFFFFF" width="100" opaqueBackground="#FF0000"/>
        <mx:Label text="Label" fontWeight="bold" fontSize="12" color="#FFFFFF" opaqueBackground="#0000FF"/>
</mx:Application>

看看运行时的情况。

下载 (8.24 KB)

昨天 10:21

这样我可以直观的看到到底是哪块区域的布局出了问题，解决问题就变得很简单。希望这个贴士也能帮到你哦。