的Flex 4.5菜单栏的垂直分隔符（使用的updateDisplayList）

Question

所以我的客户有一个设计自己的FLEX皮肤导航，看起来像这样：

我创建了一个自定义菜单栏来实现这一目标。但它似乎并没有发生。它从不呈现我对图形所做的任何更改。 我在做什么错？

这里是我试过的方法：

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { 
    super.updateDisplayList(unscaledWidth, unscaledHeight); 

    this.graphics.clear(); 
    for (var i:int = 1; i < this.menuBarItems.length; i++) { 
    var item:MenuBarItem = MenuBarItem(this.menuBarItems[i]); 
     this.graphics.beginFill(textColor); 
     this.graphics.drawRect(item.x + borderPadding, item.y, separatorSize, item.height); 
     this.graphics.endFill(); 
    } 
} 

或：

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { 
    super.updateDisplayList(unscaledWidth, unscaledHeight); 

    this.graphics.clear(); 
    for (var i:int = 1; i < this.menuBarItems.length; i++) { 
    var item:MenuBarItem = MenuBarItem(this.menuBarItems[i]); 
     item.graphics.beginFill(textColor); 
     item.graphics.drawRect(borderPadding, 0, separatorSize, item.height); 
     item.graphics.endFill(); 
    } 
} 

的CSS，我有：

mx|MenuBar.navigation { 
backgroundSkin: Embed(source="assets/A2AD00-1x1.png"); 
itemOverSkin: Embed(source="assets/8B9300-1x1.png"); 
color: #ffffff; 
borderPadding: 0; 
separatorSize: 1; 
} 

Answer 1

我不情愿地切换到只使用一个9-切片的图像。对于其他人看，这里就是我所做的：

我做了这个形象：

（有一个像素的白线右侧）

而且用这个CSS：

mx|MenuBar.navigation { 
    backgroundSkin: Embed(source="assets/A2AD00-1x1.png"); 
    itemUpSkin: Embed(source="assets/nav_up.png", 
     scaleGridTop="2", 
     scaleGridLeft="2", 
     scaleGridRight="18", 
     scaleGridBottom="3"); 
    color: #ffffff; 
} 

它工作正常。不要忘了资产添加到build.xml你的主题：

<include-file name="assets/nav_up.png" path="${basedir}/src/assets/nav_up.png" /> 
<include-file name="assets/A2AD00-1x1.png" path="${basedir}/src/assets/A2AD00-1x1.png" /> 

然后我抛出了类，我在我的问题，因为它是无用的。