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

Posted 2023-02-16

【中文标题】Flex 4.5 MenuBar 垂直分隔符（使用 updateDisplayList）

【英文标题】：Flex 4.5 MenuBar vertical separator (using updateDisplayList)

【发布时间】：2012-01-05 22:03:09

【问题描述】：

所以我的客户的弹性皮肤导航设计如下：

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

以下是我尝试过的方法：

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;

【参考方案1】：

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

我制作了这张图片：

（右侧有一条1像素的白线）

并使用了这个 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" />

然后我就把问题中的课程扔掉了，因为它没用。