flex tree的实现

来源：互联网发布：漂亮的混血儿知乎编辑：程序博客网时间：2024/05/16 06:58

新建一个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>

运行结构如下：

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

0 0