的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" /> 

然後我拋出了類，我在我的問題，因爲它是無用的。