如何将控件添加到弹性面板的标题栏？

Question

我正在尝试通过向面板控件的右上角添加句柄来实现可折叠的 TitleWindow 弹出窗口。不幸的是，绘制控件时，我添加为句柄的图像不会显示。我可以通过更改图像的来源来触发重绘，所以显然它在那里，但它以某种方式隐藏了。

有没有办法让这个 Image 控件对用户可见？

这是窗口的代码：

package
{
    import mx.containers.Panel;
    import mx.controls.Image;

    public class CollapsableWindow extends Panel
    {
        public function CollapsableWindow()
        {
            super();
        }

        public var close:Image;

        protected override function createChildren():void
        {
            super.createChildren();
            close = new Image();
            close.source = "/assets/close.png";
            close.x = this.width - 20;
            close.y = 8;
            this.titleBar.addChildAt(close, 0);
        } 

    }
}

Answer 1

您需要在 createChildren 方法中创建按钮，然后将其放置在 updateDisplayList 方法中：

    /**
     * Creates the button and adds it to the titlebar
     */
    override protected function createChildren():void 
    {
        super.createChildren();

        this.myButton = new Button();
        this.myButton.addEventListener(MouseEvent.CLICK, onButtonClick);
        this.titleBar.addChild(this.myButton);
    }

    /**
     * Sizes and positions the button on the titlebar
     */
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight);

        this.myButton.setActualSize(myButton.getExplicitOrMeasuredWidth(),
                                       myButton.getExplicitOrMeasuredHeight());

        // Position the button 
        var y:int = 4;
        var x:int = this.width - this.myButton.width - 2;
        this.myButton.move(x, y);
    }   

Answer 2

我遇到了 PNG 未显示在我们的应用程序中的问题。每隔一段时间，我们所有的巴布亚新几内亚就会消失。要测试您的代码是否遇到同样的问题，请尝试使用 GIF 或其他格式的测试图像。如果它有效，那么您将遇到我已经遇到过数十次的相同问题。

在我们的项目中，我们通过两种方式解决这个问题：

1. 解决方法。切换项目的 SDK 版本，由于某些奇怪的原因，这修复了它
   • 例如，我们使用 SDK 3.6
   • 我右键单击该项目，选择属性并转到 Flex SDK 部分
   • 从那里我切换到任何其他 SDK 版本（例如 Flex 3.2）并选择“确定”
   • 这会触发自动构建（具有某种神秘的 PNG 修复功能）
   • 然后我返回项目属性并将其返回到我们的版本。
   • 十分之八的情况会恢复 PNG 图像
   • 即使我们使用 Flex SDK 3.4 和 3.5，这也能发挥作用
2. 有效 修复。 将您的 PNG 格式更改为 PNG-24
   • 看来根本问题与使用 PNG-8 格式有关
   • 对于我们的图像，我在 Photoshop 中按 CMD-Shft-Ctrl-S 打开原始图像，调用“另存为 Web...”
   • 然后我选择 PNG-24 作为格式，而不是 PNG-8
   • 类似的过程应该适用于任何其他图像编辑程序

我希望以某种方式有所帮助，

--gMale