站长网 Unix Flex 改变树结点图标的2种方法介绍

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

方法一:根据是否有子结点进行改变 复制代码 代码如下: 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

方法一:根据是否有子结点进行改变

复制代码 代码如下:


<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>
<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″ 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;
}
}
}

本文来自网络,不代表站长网立场,转载请注明出处:https://www.zwzz.com.cn/html/server/unix/2021/0523/4728.html

作者: dawei

【声明】:站长网内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。
联系我们

联系我们

0577-28828765

在线咨询: QQ交谈

邮箱: xwei067@foxmail.com

工作时间:周一至周五,9:00-17:30,节假日休息

返回顶部