在 Flex 4 面板的标题栏右侧添加图像答案

【问题标题】：Adding an image on the right side of the title bar of a panel in Flex 4在 Flex 4 面板的标题栏右侧添加图像
【发布时间】：2011-04-25 09:05:30
【问题描述】：

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

请帮助你的想法。

【问题讨论】：

标签： apache-flex actionscript-3 flex4 mxml skinning

【解决方案1】：

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

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。

【讨论】：

【解决方案2】：

您始终可以使用 TitleWindow，并将关闭按钮重新用于除关闭之外的其他操作。这里有一个为 TitleWindow 和 TitleWindowClosebutton 设置皮肤的好例子：http://blog.flexexamples.com/2010/04/04/changing-the-close-button-skin-on-the-spark-titlewindow-container-in-flex-4/

【讨论】：