TWaver - 专注UI技术

http://twaver.servasoft.com/
posts - 171, comments - 191, trackbacks - 0, articles - 2
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

减少Menu分割线的间距

Posted on 2012-06-20 11:49 TWaver 阅读(1232) 评论(0)  编辑  收藏
     之前看到社区中有介绍怎样灵活使用右键菜单的文章。现在积累下来右键菜单的方式还是比较多的,让我们来初步了解一下:
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?算了,还是自己看源码吧:

 1 
 2 mx_internal function openSubMenu(row:IListItemRenderer):void
 3 {
 4 supposedToLoseFocus = true;
 5 
 6 var r:Menu = getRootMenu();
 7 var menu:Menu;
 8 
 9 // check to see if the menu exists, if not create it
10 if (!IMenuItemRenderer(row).menu)
11 {
12 menu = new Menu();
13 menu.parentMenu = this;
14 menu.owner = this;
15 menu.showRoot = showRoot;
16 menu.dataDescriptor = r.dataDescriptor;
17 menu.styleName = r;
18 menu.labelField = r.labelField;
19 menu.labelFunction = r.labelFunction;
20 menu.iconField = r.iconField;
21 menu.iconFunction = r.iconFunction;
22 menu.itemRenderer = r.itemRenderer;
23 menu.rowHeight = r.rowHeight;
24 menu.scaleY = r.scaleY;
25 menu.scaleX = r.scaleX;
26 
27 // if there's data and it has children then add the items
28 if (row.data &&
29 _dataDescriptor.isBranch(row.data) &&
30 _dataDescriptor.hasChildren(row.data))
31 {
32 menu.dataProvider = _dataDescriptor.getChildren(row.data);
33 }
34 menu.sourceMenuBar = sourceMenuBar;
35 menu.sourceMenuBarItem = sourceMenuBarItem;
36 
37 IMenuItemRenderer(row).menu = menu;
38 PopUpManager.addPopUp(menu, r, false);
39 }
40 
 
     看来是二级菜单上没有copy主菜单variableRowHeight的属性值,因此还是自己定义一个itemRenderer,将属性值设置到itemrenderer里面:

1 public class CustomMenuItemRenderer extends MenuItemRenderer {
2 public function CustomMenuItemRenderer() {
3 }
4 override protected function measure():void {
5 super.measure();
6 (this.owner as Menu).variableRowHeight = true;
7 }
8 }

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



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

只有注册用户登录后才能发表评论。


网站导航: