减少Menu分割线的间距

     之前看到社区中有介绍怎样灵活使用右键菜单的文章。现在积累下来右键菜单的方式还是比较多的，让我们来初步了解一下：

1.  使用flash自带的右键菜单，通过ContextMenu来设置，这是twaver最早右键菜单的解决方法，但这种方式有一个不太好的地方是自带上了flash的信息，而且无法删除，因此很不方便。

2.  使用Menu，通过左键的方式来触发弹出Menu项。这个方式还是比较能够接受的，对于flash也没有版本的要求。

3.  使用Flash Player 11.2的新功能实现右键菜单，这种方式虽然好，但是需要使用比较高的flash版本，而我们项目中很多用户使用的还是老的版本，领导觉得这种方法不太适合我们。

    上面的三种方式，我们最终选择了第二种。在实际使用过程中总是有这样那样的问题。我今天就碰到了一个这样的问题。我使用的是第二种方法：通过menu来实现右键菜单。由于菜单项比较多，而且实际应用中也还需要对菜单项进行分类、分层。

      这种效果一般来说已经够用了，但是领导觉得分割线和上下文字之间的间距太大了，需要改小一点，于是上网查了资料，发现确实有一个参数能控制：variableRowHeight。这里有详细的使用例子：Reducing the vertical space around a separator in a Flex PopUpButton control’s pop up menu by enabling variable row heights

    赶紧试试我的菜单效果，于是给menu设置了variableRowHeight=true，但效果却不是那么尽如人意：

      一级菜单还行，二级菜单上的分割线样式还是原来那样，没变，这会是什么原因呢？继续Google发现基本都是说设置了这个属性值就可以了。难道还是Adobe的bug？算了，还是自己看源码吧：

mx_internal function openSubMenu(row:IListItemRenderer):void

{

supposedToLoseFocus = true;



var r:Menu = getRootMenu();

var menu:Menu;



// check to see if the menu exists, if not create it

if (!IMenuItemRenderer(row).menu)

{

menu = new Menu();

menu.parentMenu = this;

menu.owner = this;

menu.showRoot = showRoot;

menu.dataDescriptor = r.dataDescriptor;

menu.styleName = r;

menu.labelField = r.labelField;

menu.labelFunction = r.labelFunction;

menu.iconField = r.iconField;

menu.iconFunction = r.iconFunction;

menu.itemRenderer = r.itemRenderer;

menu.rowHeight = r.rowHeight;

menu.scaleY = r.scaleY;

menu.scaleX = r.scaleX;



// if there's data and it has children then add the items

if (row.data &&

_dataDescriptor.isBranch(row.data) &&

_dataDescriptor.hasChildren(row.data))

{

menu.dataProvider = _dataDescriptor.getChildren(row.data);

}

menu.sourceMenuBar = sourceMenuBar;

menu.sourceMenuBarItem = sourceMenuBarItem;



IMenuItemRenderer(row).menu = menu;

PopUpManager.addPopUp(menu, r, false);

}

      看来是二级菜单上没有copy主菜单variableRowHeight的属性值，因此还是自己定义一个itemRenderer，将属性值设置到itemrenderer里面：

public class CustomMenuItemRenderer extends MenuItemRenderer {

public function CustomMenuItemRenderer() {

}

override protected function measure():void {

super.measure();

(this.owner as Menu).variableRowHeight = true;

}

}

      然后通过menu.itemRenderer = new ClassFactory(CustomMenuItemRenderer);设置上自定义的这个renderer，运行看看效果：

    终于达到了我们预期效果了，最后给大家分享一下源码：见原文最下方