10.7.自定義列表類控件的拽動指示器

2024-04-27 13:52:10

字體：大中小

來源：轉載

供稿：網友

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

接下來的例子自定義一個拖拽指示器，它重寫了ProgrammaticSkin 類的updateDisplayList方法，使用drawing API 來繪制一個基于當前方向屬性的箭頭圖形。

-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();
}
}
}

方向屬性取決于父List 控件怎樣組織顯示列表新增的collection 條目。當方向設置為水平，一個向下的箭頭在條目的上方顯示。如果不為水平，則被當作垂直，顯示一個向右的箭頭。

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

-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>