Flash中LIST组件使用总结

 第一节、首先，看看是如何将数据添加进LIST组件中，以及如何显示鼠标点击的对象。
1、静态生成方法：
my_list.addItem("labe"l,data);
实例：新建文件，将LIST组件拖至场景中。并将LIST组件的实例名称修改为“my_list”，在第一帧添加如下代码：

System.useCodepage=true;
var my_list:mx.controls.List;
my_list.addItem({label:"Gordon", data:123});
my_list.addItem({label:"英国", data:456});
my_list.addItem({label:"中国", data:888});

如果想测试效果，可以再在AS代码中多添加几个。。。
实例演示：

http://www.taoshaw.com/flash/list/lesson1.swf

2、动态生成方法（通过加载XML，将数据添加进LIST）：
实例：新建文件，将LIST组件拖至场景中。并将LIST组件的实例名称修改为“my_list”，在第一帧添加如下代码：

//解决乱码的问题...

其他与List组件相关原创教程查看：
[url=http://www.taoshaw.com/taoshaw/article.asp?id=1376]使用LIST组件打造QQ好友聊天器>>>[/url]
[url=http://www.taoshaw.com/taoshaw/article.asp?id=1375]使用MenuBar加载XML构建仿WINDOWS菜单>>>[/url]
[url=http://www.taoshaw.com/taoshaw/article.asp?id=1356]自由修改组件动画效果（OpenDuration、OpenEasing）>>>[/url]
[url=http://www.taoshaw.com/taoshaw/article.asp?id=1355]在FLASH中设置文本的字体（利用TextField.getFontList();）>>>[/url]
[url=http://www.taoshaw.com/taoshaw/article.asp?id=1299]LIST组件使用总结>>>[/url]

System.useCodepage = true;
//定义doc_xml为XML类；
var doc_xml:XML = new XML();
//忽略空格.
doc_xml.ignoreWhite = true;
doc_xml.onLoad = _root.xmlload;
//初次加载文件为"renming.xml"...
_root.doc_xml.load("renming.xml");
function xmlload() {
  var childnodes = this.firstChild.childNodes;
//防止垒加，这句话的含义就是让my_list每次加载的XML不一样。
  _root.my_list.removeAll();
  for (var i:Number = 0; i<childnodes.length; i++) {
    _root.my_list.addItem(childnodes[i].attributes.label, childnodes[i].attributes.data);
  }
}

 

3、通过按钮点击，分别加载不同的XML文件。

//定义地名按钮被激发时，加载地名。。。
diming.onRelease = function() {
  _root.doc_xml.load("diming.xml");
};
renming.onRelease = function() {
  _root.doc_xml.load("renming.xml");
};
shijian.onRelease = function() {
  _root.doc_xml.load("shijian.xml");
};

 

4、调用被鼠标点击后的对象，以及调用该对象的数据：

_root.onEnterFrame = function() {
  show_txt_label = _root.my_list.selectedItem.label;
  show_txt_data = _root.my_list.selectedItem.data;
};

my_list.selectedItem.label;my_list.selectedItem.data;
第一节中2-4步的所有例子如下：
http://www.taoshaw.com/flash/list/lesson2.html

第二节、关于LIST组件的相关操作。

1、删除LIST组件列表中的所有项：

_root.my_list.removeAll();

方法；删除列表中的所有项。
调用此方法会修改 List 组件的数据提供程序。如果与其它组件共享数据提供程序，则那些组件也会更新。
当按下按钮时，以下代码将会清除 List 组件中的所有项。

2、删除当前所选项目：
List.removeItemAt()

  var n:Number=_root.my_list.selectedIndex;
  _root.my_list.removeItemAt(n)

3、上一个、下一个选择方法：

selIndex = _root.my_list.selectedIndex;
  _root.my_list.selectedIndex = ((selIndex == 0) || (selIndex == undefined) ? _root.my_list.length-1 : selIndex-1);
    //让滚动条跟随
  _root.my_list.vPosition = selIndex-2;
  //每次减一，如果项目为第一项或undefined，则从倒数最后一项开始，Flash的算法中，0 是第一项，length-1 则为最后一项
  if (selIndex == 0 || selIndex == undefined) {
    _root.my_list.vPosition = _root.my_list.length-1;

第二节中1---3的实例：
演示：
http://www.taoshaw.com/flash/list/removeAll.html

//本文件中加载的XML文件在上一步骤中有。下同。。。

4、将一个LIST中的数据添加进另一个LIST数据：

//以下是将左侧数据添加进右侧LIST列表中。。。
var newobj = new Object();
_root.my_list.addEventListener("change",newobj);

j = 0;
arr_3 = new Array();
arr_4 = new Array();

//以下判断是否重复选择============
var label_arr:Array = new Array();
//检测是否有重复的Label值
function checkRepeat(v) {
  var isRepeat:Boolean = false;
  var len:Number = label_arr.length;
  for (var i = 0; i<len; i++) {
    if (v == label_arr[i]) {
      isRepeat = true;
      break;
    }
  }
  return isRepeat;
}
//========================

//点击选择单项
newobj.change = function(num) {
  var newobject = num.target.selectedItem;
  arr_3[j] = newobject.label;
  arr_4[j] = newobject.data;
  if (checkRepeat(arr_4[j]) == false) {
  _root.my_listother.addItem({data:arr_4[j], label:arr_3[j]});
    label_arr.push(arr_4[j]);
  } else {
    already_select.gotoAndPlay(2);
  }
  j++;
};

5、点击按钮，将一个LIST中所有项目添加进另一个LIST中。

show_db_menu = function () {
  if (_root.my_list.selectedIndex>=0) {
    _root.my_list.selectedIndex = undefined;
  }
  //这里是关键，如果当前已有选项，则取消选择，以便下面for循环发挥作用。
  for (i=0; i<(_root.my_list.length); i++) {
    var selIndex = _root.my_list.selectedIndex;
    _root.my_list.selectedIndex = ((selIndex == undefined) ? 0 : selIndex+1);
    //如果当前没有选项则从第一项开始，flash递增算法中，0就是1，每次加一直到末尾com_box.length
    var newobject_menu = _root.my_list.selectedItem;
    arr_3[j] = newobject_menu.label;
    arr_4[j] = newobject_menu.data;
    if (checkRepeat(arr_4[j]) == false) {
      _root.my_listother.addItem({label:arr_3[j], data:arr_4[j]});
      label_arr.push(arr_4[j]);
    }
    j++;
  }
};

第二节中4----5步骤。
实例：http://www.taoshaw.com/flash/list/onetoother.html

6、在Flash 的 List 组件每行列表文字前加图标：

var labelname = ["淘沙网", "沙子", "taoshaw", "大浪淘沙"];
var ico_mc:Array = new Array();
list.iconField = "icon";//设置对象数组中作为图标的标识符，非链接属性
for (var i = 0; i<4; i++) {
  ico_mc.addItem({label:labelname[i], icon:"ico" + i});//如需统一图标，这里写成 icon:"ico0"，相应更改库中影片的链接属性
}
list.dataProvider = ico_mc;

实例：http://www.taoshaw.com/flash/list/listico.html

7、LIST组件的美化。
关于LIST组件样式的美化（包含修改滚动条样式等）：
实例：

 点击播放/隐藏媒体

http://www.taoshaw.com/flash/listmeihua.swf

代码如下：（LIST实例名为：“clList”）

import mx.controls.List;
import mx.controls.scrollClasses.ScrollBar;
ScrollBar.prototype.scrollTrackName="mc1";
ScrollBar.prototype.thumbMiddleName="mc2";
ScrollBar.prototype.thumbBottomName="mc2";
ScrollBar.prototype.thumbTopName="mc2";
ScrollBar.prototype.thumbGripName="mc3";
ScrollBar.prototype.upArrowUpName="mc4";
ScrollBar.prototype.upArrowOverName="mc4";
ScrollBar.prototype.upArrowDownName="mc4";
ScrollBar.prototype.downArrowUpName="mc5";
ScrollBar.prototype.downArrowOverName="mc5";
ScrollBar.prototype.downArrowDownName="mc5";
var clList:List;
clList.setStyle("borderStyle","none");

//upArrowUpName 向上和向左按钮的弹起（正常）状态。默认值为 ScrollUpArrowUp。
 
upArrowOverName 向上和向左按钮的滑过状态。默认值为 ScrollUpArrowOver。
 
upArrowDownName 向上和向左按钮的按下状态。默认值为 ScrollUpArrowDown。
 
downArrowUpName 向下和向右按钮的弹起（正常）状态。默认值为 ScrollDownArrowUp。
 
downArrowOverName 向下和向右按钮的滑过状态。默认值为 ScrollDownArrowOver。
 
downArrowDownName 向下和向右按钮的按下状态。默认值为 ScrollDownArrowDown。
 
scrollTrackName 用于滚动条的轨道（背景）的元件。默认值为 ScrollTrack。
 
scrollTrackOverName 用于滑过滚动轨道时的轨道（背景）的元件。默认值为 undefined。
 
scrollTrackDownName 用于按下滚动轨道时的轨道（背景）的元件。默认值为 undefined。
 
thumbTopName 滚动框（滑块）的顶端和左端。默认值为 ScrollThumbTopUp。
 
thumbMiddleName 滑块的中间（可扩展）部分。默认值为 ScrollThumbMiddleUp。
 
thumbBottomName 滑块的底端和右端。默认值为 ScrollThumbBottomUp。
 
thumbGripName 显示在滑块之上的抓手。默认值为 ScrollThumbGripUp。

8、关于LIST组件样式的设置参考：
http://doc.51windows.net/FlashHelpSC/?url=/FlashHelpSC/sc/UsingComponents/04_components91.html
http://doc.51windows.net/FlashHelpSC/?url=/FlashHelpSC/sc/UsingComponents/04_components98.html
http://www.5460.net/gy5460/jsp/article/dispArt.jsp?dNum=535270
List组件样式属性

 backgroundColor 背景色

 backgroundAlpha 背景色透明度 数值从0.00~1.00

 useRollOver 是否使用鼠标经过List每一项时产生效果 true false

 rollOverColor 鼠标经过每一项时的背景色 useRollOver为

true时有效

 textRollOverColor 鼠标经过每一项时的文字颜色 useRollOver为

true时有效

 alternatingItemColors List中间隔背景色 这个属性要设置2个色

彩，某一项的背景色和下一项的背景色

 color 选项文本颜色

 selectionColor 被选中项的背景色

 textSelectedColor 被选中项的文字颜色

 

 textIndent 选项文本缩进距离

 selectionDuration 被选中项渐变速度 被选中项背景色变为

selectionColor中的值的速度，设置可实现渐变效果 数值从0~5000 值越大，渐变速度越慢

 borderStyle 边框样式 none solid inset

outset

 borderColor 边框颜色

 borderThickness 边框粗细 数值从0~20

 dropShadowEnabled 是否显示投影 true和false 2个属性

 shadowDistance 投影大小 dropShadowEnabled为true时有效 数

值从0~20

 shadowDirection 投影方向 3个属性 left right center

 dropShadowColor 投影的颜色

9、怎么能把list组件的边去了？
//my_list为LIST组件在场景中的实例名称。
_root.my_list.setStyle("borderStyle", "none");

10、为LIST组件指定交替模式中行的颜色：
//直接粘贴此行。。。是固定模式。。。
_global.styles.ScrollSelectList.setStyle("alternatingRowColors", [0xFF00AA, 16777215])

11、让list组件支持html标签：
http://www.stonemx.com/blog/archives/2006/200681803148.html

12、通过dataProvider给LIST组件添加数据源，数据源来自来数组；
var my_List:mx.controls.List;
var myArray:Array=new Array();
myArray.push({label:"涪陵",data:1});
myArray.push({label:"丰都",data:2})
myArray.push({label:"重庆",data:3})
my_List.dataProvider=myArray;
//备注：通过dataProvider给组件添加数据时，第二次使用本命令，将会替换掉第一次的全部数据。而使用addItem则不会。

13、使用事件调度返回LIST的值：
var my_List:mx.controls.List;
var my_Array:Array=new Array();
my_Array.push({label:"涪陵",data:1})
my_Array.push({label:"丰都",data:2])
my_List.dataProvider=my_Array;
var LO:Object=new Object();
LO.change=function(eventObj:Object):Void{
trace(eventObj.target.selectedItem.data)
}
my_List.addEventListener("change",LO)

 

 

具体链接请看：http://www.taoshaw.com/taoshaw/article.asp?id=1299