[AS3編程教學]Flash組件之下拉列表Combox使用?

下拉列表是一個非常神奇的組件，你需要在一列選中中選中一個並且顯示，但是你並不需要每時每刻都看到他們，於是Combox出現了。Comb是梳子的意思，box是盒子的意思，這兩個詞連起來似乎就很形象地表示了Combox是什麼東西了，我不知道這個東西是誰發明的，似乎是微軟發明的，向那些偉大的IT前輩致敬。

出於編碼規範和項目開發的考慮，我們用一個文檔類來寫本次教程的代碼。

工具/原料

Flashcs3（及其以上版本，鄙人用的是flashcs5）

FlashDevelop，如果不會用，直接用flash寫代碼也行。

方法/步驟

沿用上一節的老主題，我們打算做一個人物信息選擇的交互作品，全部使用Combox控件和按鈕來完成。所以首先我們新建文檔，大小和幀頻默認就可以了，在舞臺的第一個圖層命名為“靜態文本”，寫上一下文本信息：信息選擇 性別年齡身高血型體重職業這六項，以及右側寫一個：選擇結果。如下圖所示：

相信即使像我這樣不聰明的同學看了上面的靜態提示文字也明白我們要做什麼了，知道做什麼再往下看教程是最好不過了。接下來我們，新建一個圖層叫做元件“，ctrl +F7打開組件面板,然後拖動6個Combox控件到相應的描述文字位置，並給他們命名為mcComb0~mcComb5,然後拖動一個按鈕組件到下面的位置，命名為btnSure,新建一個動態文本框到右側“選擇結果”下面，並且在屬性面板中單擊顯示邊框效果，使其有個黑邊，命名為txtResult。

現在我們ctrl+enter測試一下，會發現所有的下拉列表都是空的，單擊沒反應，我們的按鈕單擊也沒反應。

為了養成面向對象的思維和概念，我們今天的代碼不寫在幀上，而是寫在文檔類裡。

在flash裡按下Ctrl+Shift+F12，打開發佈設置面板，單擊“腳步ActionScript”旁邊的小扳手，打開代碼設置面板，不勾選“自動聲明舞臺實例”，然後新建一個ActionScript文件，命名為Main.as，將所有的元件都定義一次。以上兩步入下圖所示：

下拉列表的數據填充是通過一個dataprovider,組成dataProvider的數組是由帶有屬性label和data的對象構成的，有多少個對象，下拉列表就有多少項，首先我們給“性別”項填充數據，性別有三種：男，女，保密三種。代碼如下：

//性別數據設置

var items:Array= [ { label:"男", data:"0" }, { label:"女", data:"1" }, { label:"保密", data:"2" } ];

mcComb0.dataProvider= new DataProvider(items);

然後我們按下ctrl+enter測試一下，單擊下拉列表，選擇一種性別，發現上面選中框的性別跟著變化，成功！

年齡數據我們分成五個階段：小於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。現在我們可以選擇性別和年齡了。如果有同學是第一次做，一定很激動，因為我當年要是能做出這點效果，就會灰常激動。

接下去我們給“身高、血型、體重、職業”這四項添加數據（代碼最後完整公佈），測試效果如下：

別忘了還有一個按鈕和一個文本框，我想做的是點下按鈕，然後文本框裡顯示出我們選擇的東西。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+"。");

}

我們發佈隨便做一個選擇，效果圖如下：

現在發現單擊其中某個下拉組件時右邊的選擇結果不會跟著刷新，所以我們給每個組件增加一個內容改變的響應事件，每次單擊後重新顯示右側的選擇內容。拿性別來舉例，代碼如下：

mcComb0.addEventListener(Event.CHANGE,changeData);

private functionchangeData(e:Event):void

{

showSelectInfo();

}

其餘的可以參考第一個來完成。

Ok，我們對下拉列表的這個練習功能完成了，這個教程簡單但是實用並且編碼規範。本人也經常在工作學習中重新到百度搜到自己的教程，從裡面拷代碼用。如果需要源文件的同學可以找我的QQ。

下面是本項目的完整代碼：

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+"。");

}

}

}

注意事項

認真看教程和練習就不需要注意什麼。