在 Flex 4 面板的标题栏右侧添加图像 [英] Adding an image on the right side of the title bar of a panel in Flex 4

问题描述

我正在尝试基于 spark 面板创建一个 MXML 组件，我想在标题栏的右端添加一个图像，以便面板在标题栏上有一个文本和一个小图像在右端.我正在使用皮肤来定义颜色、背景填充等.但是如何在标题栏的右端添加此图像?我想让该图像可裁剪，以便在插入组件时，使用默认图像或提供新图像.

I'm trying to create a MXML component based on the spark Panel and I would like to add an image on the right end of the title bar, so that the panel will have a text on the title bar and a small image at the right end. I'm using a skin to define the colors, background fill etc. But how do I add this image at the right end of the title bar? I would like to make that image cutomizable so that when the component is inserted, either the default image is used or a new image can be provided.

请帮忙提出您的想法.

推荐答案

将图像组件添加到您的皮肤并为其指定 id，同时设置您要显示的默认图像.然后创建一个扩展 Panel 的 ActionScript 组件.在您的自定义面板代码中，使用与您放置在皮肤中的 ID 相同的名称声明一个皮肤部件.现在覆盖自定义面板中的 partAdded 函数并将图像设置为您喜欢的任何内容:

Add the image component to your skin and give it an id, also set the default image you want to show. Then create an ActionScript component extending Panel. In your custom Panel code, declare a skin part using the same name as the id you put in your skin. Now override the partAdded function in your custom Panel and set the image to whatever you like:

package mypackage
{
    import spark.components.Panel;
    import spark.primitives.BitmapImage;

    public class MyCustomPanel extends Panel
    {

        [SkinPart (required="false")]
        public var panelIcon:BitmapImage;

        override protected function partAdded(partName:String, instance:Object):void {
            super.partAdded(partName, instance);

            if (instance == panelIcon) {
                panelIcon.source = someOtherImageSource;
            }
        }
    }
}

最后，在 CSS 中或通过在使用自定义面板时设置 skinClass 将您的皮肤文件与自定义面板相关联.

Lastly, associate your skin file with your custom panel, either in CSS or by setting the skinClass when you use your custom panel.

这篇关于在 Flex 4 面板的标题栏右侧添加图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！