Flex tree叶节点缩进（ItemRenderer应用）

tree组件默认显示效果是这样的，设计人员设计的效果是这样的，仔细对比一下，不难发现两者的区别（设计效果相对于默认效果）：

1）去掉了文件夹图标；

2）叶节点向左缩进，和小三角图标是对齐的；

3）图标、文字颜色不同。

关于修改图标和文字颜色，直接用style就可以实现。去掉文件夹图标也可以通过style实现，难点在于如何让叶节点向左缩进。

Tree的style中的indentation只能实现整体的缩进，无法达到想要的效果。然后就想到了用ItemRenderer，新建一个类文件CustomTreeItemRenderer.as 继承TreeItemRenderer，然后设置Tree的itemRenderer="CustomTreeItemRenderer"。CustomTreeItemRenderer.as代码如下。

package
{
	import mx.controls.treeClasses.TreeItemRenderer;
	import mx.controls.treeClasses.TreeListData;

	public class CustomTreeItemRenderer extends TreeItemRenderer
	{
		public function CustomTreeItemRenderer()
		{
			super();
		}
		/**
		 *  @private
		 */
		override protected function updateDisplayList(unscaledWidth:Number,
													  unscaledHeight:Number):void
		{
			super.updateDisplayList(unscaledWidth, unscaledHeight);

			var startx:Number = data ? TreeListData( listData ).indent : 0;
			if (disclosureIcon)
			{
				disclosureIcon.x = startx;
				disclosureIcon.visible = data ?
					TreeListData( listData ).hasChildren :
					false;
				if(disclosureIcon.visible){
					startx = disclosureIcon.x + disclosureIcon.width;
				}

				disclosureIcon.setActualSize(disclosureIcon.width,
					disclosureIcon.height);

			}

			if (icon)
			{
				icon.x = startx;
				startx = icon.x + icon.measuredWidth;
				icon.setActualSize(icon.measuredWidth, icon.measuredHeight);
			}

			label.x = startx ;

		}
	}
}

关键在于这句：

disclosureIcon.visible = data ?TreeListData( listData ).hasChildren :false;

if(disclosureIcon.visible){
    startx = disclosureIcon.x + disclosureIcon.width;
}

先设置disclosureIcon的visible属性，有子节点的显示disclosureIcon，没有子节点的，不显示。猜也能猜出来disclosureIcon就是那个文件夹图标。如果文件夹图标显示，startx向右挪，如果文件夹图标不显示，startx就不用向右挪。这样就实现了叶节点和兄弟节点的小三角对齐。