10.7.自定義列表類控件的拽動(dòng)指示器

2024-04-27 13:52:10

字體：大中小

供稿：網(wǎng)友

10.7.1 問(wèn)題
你想自定義拖拽指示器的圖形，并在list 控件的拖拽操作期間顯示。
10.7.2 解決辦法
創(chuàng)建一個(gè)自定義的可編程皮膚(programmatic skin)，并且為一個(gè)List 控件設(shè)置dropIndicatorSkin 樣式屬性。
10.7.3. 討論
Flex 框架的列表類組件具有默認(rèn)的可編程（programmatic）皮膚，在你執(zhí)行拖拽操作時(shí)用來(lái)渲染指示器。當(dāng)ListBase.showDropFeedback 方法在一個(gè)list 的內(nèi)部被調(diào)用，一個(gè)指示器（indicator）類的實(shí)例被創(chuàng)建，在這個(gè)條目的上邊或左邊一個(gè)像素位置處被渲染（具體取決于條目在list 控件里是如何組織的）。通過(guò)擴(kuò)展mx.skins.ProgrammaticSkin 類和設(shè)置一個(gè)組件的dropIndicatorSkin 樣式屬性，你可以自定義拖拽指示器。

接下來(lái)的例子自定義一個(gè)拖拽指示器，它重寫了ProgrammaticSkin 類的updateDisplayList方法，使用drawing API 來(lái)繪制一個(gè)基于當(dāng)前方向?qū)傩缘募^圖形。

-ActionScript

package oreilly.cookbook {
import mx.skins.ProgrammaticSkin;
public class CustomDropIndicator extends ProgrammaticSkin {
public var direction:String = "horizontal" ;
public function CustomDropIndicator() {super();}
override protected function updateDisplayList (unscaledWidth:Number, unscaledHeight:Number ):void {
super.updateDisplayList(unscaledWidth, unscaledHeight );
graphics.clear();
graphics.beginFill( 0x000000 );
if( direction == "horizontal"){
graphics.moveTo( 4, -10 );
graphics.lineTo( 6, -10 );
graphics.lineTo( 6, -4 );
graphics.lineTo( 10, -4 );
graphics.lineTo( 5, 0 );
graphics.lineTo( 0, -4 );
graphics.lineTo( 4, -4 );
graphics.lineTo( 4, -10 );
}
else{
graphics.moveTo( 10, 4 );
graphics.lineTo( 10, 6 );
graphics.lineTo( 5, 6 );
graphics.lineTo( 5, 10 );
graphics.lineTo( 0, 5 );
graphics.lineTo( 5, 0 );
graphics.lineTo( 5, 4 );
graphics.lineTo( 10, 4 );
}
graphics.endFill();
}
}
}

方向?qū)傩匀Q于父List 控件怎樣組織顯示列表新增的collection 條目。當(dāng)方向設(shè)置為水平，一個(gè)向下的箭頭在條目的上方顯示。如果不為水平，則被當(dāng)作垂直，顯示一個(gè)向右的箭頭。

下面的程序增加一個(gè)List 控件和一個(gè)TileList 控件到顯示列表，并且設(shè)置每個(gè)組件的dropIndicatorSkin 屬性，從而自定義先前例子中創(chuàng)建的指示器。

-XML

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" creationComplete="creationHandler();">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private function creationHandler():void {
contactList.dataProvider = new ArrayCollection(['Josh', 'Abey', 'Todd']);
}

]]>
</mx:Script>
<mx:List id="contactList" width="200" height="200" allowMultipleSelection="true"
dragEnabled="true" dropEnabled="true" dropIndicatorSkin="com.oreilly.flexcookbook.CustomDropIndicator" />
<mx:TileList id="tileList" width="180" height="200"
dropEnabled="true" dropIndicatorSkin="com.oreilly.flexcookbook.CustomDropIndicator" />
</mx:Application>