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

Posted 2023-02-23

【中文标题】在 Flex 4 面板的标题栏右侧添加图像

【英文标题】：Adding an image on the right side of the title bar of a panel in Flex 4

【发布时间】：2011-04-25 09:05:30

【问题描述】：

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

请帮助你的想法。

【参考方案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/