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>