flex tree的实现

新建一个tree.mxnl

代码如下：

<?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:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
        <fx:XML id="dp">
            <root>
                <folder label="漳州师院">
                    <folder label="数学系">
                        <item label="数本一班" />
                        <item label="数本二班" />
                        <item label="数本三班" />
                        <item label="数本四班" />
                        <item label="信息一班" />
                        <item label="信息二班" />
                    </folder>
                    <item label="达理学生公寓" />
                    <item label="逸夫图书馆" />
                </folder>
                <folder label="外语系">
                    <item label="英语角" />
                    <folder label="师范专业">
                        <item label="英语一班" />
                        <item label="英语二班" />
                    </folder>
                </folder>
            </root>
        </fx:XML>
    </fx:Declarations>
    
    <mx:HDividedBox width="212" height="541">
        <mx:Tree id="school_tree" width="232" height="513" dataProvider="{dp}" labelField="@label"
                 showRoot="false">
        </mx:Tree>
        
    </mx:HDividedBox>
</s:Application>

运行结果如下：

发现这样的树结构太丑了，美化下吧，在src下新建文件夹resources/img/icon，在这下面放几个小图标，然后设置下树结构文字的大小，修改后的代码如下

<?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:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<fx:XML id="dp">
			<root>
				<folder label="漳州师院">
					<folder label="数学系">
						<item label="数本一班" />
						<item label="数本二班" />
						<item label="数本三班" />
						<item label="数本四班" />
						<item label="信息一班" />
						<item label="信息二班" />
					</folder>
					<item label="达理学生公寓" />
					<item label="逸夫图书馆" />
				</folder>
				<folder label="外语系">
					<item label="英语角" />
					<folder label="师范专业">
						<item label="英语一班" />
						<item label="英语二班" />
					</folder>
				</folder>
			</root>
		</fx:XML>
	</fx:Declarations>
	
	<mx:HDividedBox width="212" height="541">
		<mx:Tree id="school_tree" width="232" height="513" dataProvider="{dp}" 
				 labelField="@label"
				 fontSize="13"
				 folderClosedIcon="@Embed(source='resources/img/icon/f.png')"
				 folderOpenIcon="@Embed(source='resources/img/icon/f.png')"
				 defaultLeafIcon="@Embed(source='resources/img/icon/p.png')"
				 showRoot="false">
		</mx:Tree>
		
	</mx:HDividedBox>
</s:Application>

运行结构如下：

好了，这样好看多了。有时间在对这树进一步修改，添加树的点击事件什么的.