Flex 4.5 MenuBar垂直分隔符（使用updateDisplayList）

Question

所以我的客户端有一个灵活皮肤导航设计，如下所示：

我已经创建了一个自定义MenuBar来实现这一目标。但它似乎并没有发生。它永远不会呈现我对Graphics所做的任何更改。 我做错了什么？

以下是我尝试过的方法：

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

然后我把我在课堂上的课程扔掉了，因为它没用。