[AS3编程教学]Flash组件之下拉列表Combox使用

1、沿用上一节的老主题，我们打算做一个人物信息选择的交互作品，全部使用Combox控件和按钮来完成。所以首先我们新建文档，大小和帧频默认就可以了，在舞台的第一个图层命名为“静态文本”，写上一下文本信息：信息选择 性别年龄身高血型体重职业这六项，以及右侧写一个：选择结果。如下图所示：

2、相信即使像我这样不聪明的同学看了上面的静态提示文字也明白我们要做什么了，知道做什么再往下看教程是最好不过了。接下来我们，新建一个图层叫做元件“，ctrl +F7打开组件面板,然后拖动6个Combox控件到相应的描述文字位置，并给他们命名为mcComb0~mcComb5,然后拖动一个按钮组件到下面的位置，命名为btnSure,新建一个动态文本框到右侧“选择结果”下面，并且在属性面板中单击显示边框效果，使其有个黑边，命名为txtResult。

3、现在我们ctrl+enter测试一下，会发现所有的下拉列表都是空的，单击没反应，我们的按钮单击也没反应。

4、为了养成面向对象的思维和概念，我们今天的代码不写在帧上，而是写在文档类里。在flash里按下Ctrl+Shift+F12，打开发布设置面板，单击“脚步ActionScript”旁边的小扳手，打开代码设置面板，不勾选“自动声明舞台实例”，然后新建一个ActionScript文件，命名为Main.as，将所有的元件都定义一次。以上两步入下图所示：

5、下拉列表的数据填充是通过一个dataprovider,组成dataProvider的数组是由带有属性label和data的对象构成的，有多少个对象，下拉列表就有多少项，首先我们给“性别”项填充数据，性别有三种：男，女，保密三种。代码如下：//性别数据设置var items:Array= [ { label:"男", data:"0" }, { label:"女", data:"1" }, { label:"保密", data:"2" } ];mcComb0.dataProvider= new DataProvider(items);然后我们按下ctrl+enter测试一下，单击下拉列表，选择一种性别，发现上面选中框的性别跟着变化，成功！

6、年龄数据我们分成五个阶段：小于18岁，18岁~30岁，31岁~45岁，46荞恨爆肢岁~55岁，56岁以上。设置数据代码如下：//年龄数据设置足毂忍珩items = [ {label:"小于18岁", data:"0" }, { label:"18岁~30岁", data:"1" }, { label:"31岁~45岁", data:"2" } , { label:"46岁~55岁", data:"3" }, { label:"56岁以上", data:"4" } ];mcComb1.dataProvider= new DataProvider(items);然后我们按下ctrl+enter测试一下，单击下拉列表，选择一种年龄，一切ok。现在我们可以选择性别和年龄了。如果有同学是第一次做，一定很激动，因为我当年要是能做出这点效果，就会灰常激动。

7、接下去我们给“身高、血型、体重、职业”这四项添加数据（代码最后完整公布），测试效果如下：

8、别忘了还有一个按钮和一个文本框，我想做的是点下按钮，然后文本框里显示出我们选择的东西。So,给按钮写下单击代码，单击后在右侧文本框里显示选择的内同柙丕牌容，代码如下：btnSure.label ="确定";btnSure.addEventListener(MouseEvent.MOUSE_DOWN,subMitSelect);private functionsubMitSelect(e:MouseEvent):void { showSelectInfo(); } private functionshowSelectInfo():void { txtResult.text = ""; txtResult.appendText("您的性别是" + mcComb0.selectedItem.label+","); txtResult.appendText("您的年龄在" + mcComb1.selectedItem.label+"范围内,"); txtResult.appendText("您的身高在" + mcComb2.selectedItem.label+"范围内,"); txtResult.appendText("您的血型是" +mcComb3.selectedItem.label+","); txtResult.appendText("您的体重是" + mcComb4.selectedItem.label+","); txtResult.appendText("您的职业是" + mcComb5.selectedItem.label+"。"); } 我们发布随便做一个选择，效果图如下：

9、现在发现单击其中某个下拉组件时右边的选择结果不会跟着刷新，所以我们给每个组件增加一个内容改变的响应事件，每次单击后重新显示右侧的选择内容。拿性别来举例，代码如下：mcComb0.addEventListener(Event.CHANGE,changeData);private functionchangeData(e:Event):void { showSelectInfo(); }其余的可以参考第一个来完成。

10、Ok，我们对下拉列表的这个练习功能完成了，这个教程简单但是实用并且编码规范。本人也经常在工作学习中重新到百度搜到自己的教程，从里面拷代码用。如果需要源文件的同学可以找我的QQ。

11、下面是本项目的完整代码：package { import flash.display.Sprite; import fl.艘早祓胂controls.ComboBox; import fl.controls.Button; import fl.data.DataProvider; import flash.events.Event; import flash.events.MouseEvent; import flash.text.TextField; /** *as编程教学值Combox使用 *@author Tiger [email protected] *2012/10/7 16:20 */ public class Main extends Sprite { public var mcComb0:ComboBox public var mcComb1:ComboBox public var mcComb2:ComboBox public var mcComb3:ComboBox public var mcComb4:ComboBox public var mcComb5:ComboBox public var btnSure:Button; public var txtResult:TextField; public function Main() { initSet(); } private function initSet():void { //性别数据设置 var items:Array = [ {label:"男",data:"0" }, { label:"女", data:"1" }, { label:"保密", data:"2" } ]; mcComb0.dataProvider = newDataProvider(items); mcComb0.addEventListener(Event.CHANGE,changeData); //年龄数据设置 items = [ { label:"小于18岁", data:"0" }, { label:"18岁~30岁", data:"1" }, { label:"31岁~45岁", data:"2" } , { label:"46岁~55岁", data:"3" }, { label:"56岁以上", data:"4" } ]; mcComb1.dataProvider = newDataProvider(items); mcComb1.addEventListener(Event.CHANGE,changeData); //身高数据设置 items = [ { label:"小于160cm", data:"0" }, {label:"160cm~170cm", data:"1" }, {label:"170cm~180cm", data:"2" } , {label:"180cm~190cm", data:"3" }, { label:"190cm以上", data:"4" } ]; mcComb2.dataProvider = newDataProvider(items); mcComb2.addEventListener(Event.CHANGE,changeData); //血型数据设置 items = [ { label:"A型", data:"0" }, { label:"B型", data:"1" }, { label:"AB型", data:"2" } , { label:"O型", data:"3" } ]; mcComb3.dataProvider = newDataProvider(items); mcComb3.addEventListener(Event.CHANGE,changeData); //体重数据设置 items = [ { label:"较轻", data:"0" }, { label:"正常", data:"1" }, { label:"偏胖", data:"2" } , { label:"超重", data:"3" } ]; mcComb4.dataProvider = newDataProvider(items); mcComb4.addEventListener(Event.CHANGE,changeData); //职业数据设置 items = [ { label:"Flash互动设计师", data:"0" }, {label:"平面设计师",data:"1" }, { label:"游戏策划", data:"2" } , { label:"2D美术师", data:"3" }, {label:"3D建模师",data:"4" } ]; mcComb5.dataProvider = newDataProvider(items); mcComb5.addEventListener(Event.CHANGE,changeData); btnSure.label = "确定"; btnSure.addEventListener(MouseEvent.MOUSE_DOWN,subMitSelect); } private functionchangeData(e:Event):void { showSelectInfo(); } private functionsubMitSelect(e:MouseEvent):void { showSelectInfo(); } private functionshowSelectInfo():void { txtResult.text = ""; txtResult.appendText("您的性别是" +mcComb0.selectedItem.label+","); txtResult.appendText("您的年龄在" + mcComb1.selectedItem.label+"范围内,"); txtResult.appendText("您的身高在" + mcComb2.selectedItem.label+"范围内,"); txtResult.appendText("您的血型是" +mcComb3.selectedItem.label+","); txtResult.appendText("您的体重是" +mcComb4.selectedItem.label+","); txtResult.appendText("您的职业是" + mcComb5.selectedItem.label+"。"); } } }