Flex 改变树结点图标的2种方法介绍

admin Flex

2023-12-05 0 432

方法一：根据是否有子结点进行改变复制代码代码如下: <fx:Style> @namespace s \”library://ns.adobe.com/flex/spark\”; @namespace mx \”library://ns.adobe.com/flex/mx\”; mx|Tree{ /*去掉默认文件夹图标*/ folderClosedIcon: Embed(source=\’resource/region.png\’); folderOpenIcon: Embed(source=\’resource/region.png\’); /*去掉叶子节点图标 defaultLeafIcon: ClassReference(null); */ /* defaultLeafIcon 指定叶图标 disclosureClosedIcon 指定的图标旁边显示一个封闭的分支节点。默认的图标是一个黑色三角形。 disclosureOpenIcon 指定的图标旁边显示一个开放的分支节点。默认的图标是一个黑色三角形。 folderClosedIcon 关闭指定的文件夹图标的一个分支节点。 folderOpenIcon 指定打开的文件夹图标的一个分支节点。例：三角图标修改如下代码使用即可换成自己的了： disclosureOpenIcon:Embed(source=\’resource/region.png\’); disclosureClosedIcon:Embed(source=\’resource/region.png\’); */ } </fx:Style> 方法二：根据结点的属性，灵活改变图标复制代码代码如下: <?xml version=\”1.0\” encoding=\”utf-8\”?> <s:Application xmlns:fx=\”http://ns.adobe.com/mxml/2009\” xmlns:s=\”library://ns.adobe.com/flex/spark\” xmlns:mx=\”library://ns.adobe.com/flex/mx\” minWidth=\”955\” minHeight=\”600\”> <fx:Script> <![CDATA[ ]]> </fx:Script> <fx:Declarations> <!– 将非可视元素（例如服务、值对象）放在此处 –> <fx:XML id=\”treeData\”> <root> <node label=\”CI配置项\” iconName=\”computer.png\”> <node label=\”资源\” iconName=\”computer.png\”> <node label=\”硬件资源\” iconName=\”computer.png\”> <node label=\”硬件设备\” iconName=\”computer.png\”> </node> <node label=\”硬件模块\” iconName=\”computer.png\”> <node label=\”端口\” iconName=\”computer.png\”> </node> </node> </node> </node> </node> <node label=\”字典\” iconName=\”dictionary.png\”> </node> </root> </fx:XML> </fx:Declarations> <mx:Tree left=\”5\” top=\”5\” bottom=\”5\” width=\”150\” dataProvider=\”{treeData}\” id=\”myTree\” showRoot=\”false\” labelField=\”@label\” itemRenderer=\”com.flex.tree.dynamicicontree.IconTreeRenderer\”> </mx:Tree> </s:Application> package com.flex.tree.dynamicicontree { import flash.xml.*; import mx.collections.*; import mx.controls.Image; import mx.controls.listClasses.*; import mx.controls.treeClasses.*; import mx.styles.StyleManager; /* * ICON Tree的渲染器 */ public class IconTreeRenderer extends TreeItemRenderer { protected var myImage:ImageRenderer; private var imageWidth:Number = 16; private var imageHeight:Number = 16; private static var defaultImg:String = \”windows.png\”; public function IconTreeRenderer () { super(); } override protected function createChildren():void { super.createChildren(); myImage = new ImageRenderer(); myImage.source = defaultImg; myImage.width=imageWidth; myImage.height=imageHeight; myImage.setStyle( \”verticalAlign\”, \”middle\” ); addChild(myImage); } //通过覆盖data方法来动态设置tree的节点图标 override public function set data(value:Object):void { super.data = value; var imageSource:String=value.@iconName.toString(); if(imageSource!=\”\”) { myImage.source=imageSource; }else{ myImage.source=defaultImg; } } //隐藏原有图标，并设置它的坐标 override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { super.updateDisplayList(unscaledWidth, unscaledHeight); if(super.data !=null) { if (super.icon != null) { myImage.x = super.icon.x; myImage.y = 2; super.icon.visible=false; } else { myImage.x = super.label.x; myImage.y = 2; super.label.x = myImage.x + myImage.width + 17; } } } } } package com.flex.tree.dynamicicontree { import mx.controls.Image; public class ImageRenderer extends Image { private var defaultURL:String = \”assets/icon/\”; public var iconName:String; public function ImageRenderer() { super(); } override public function set source(url:Object):void{ super.source = defaultURL + url; iconName = url as String; } } }