仅覆盖一个组件 - Flex Mobile，覆盖获取宽度或高度

Question

关于我想要做的事情的一点背景。 我有一个自定义皮肤，我有一个可设置的文本字段来显示日期。 单击绑定到日期的可标记文本字段时，会出现日期微调器。 在datepinner后面，我绘制了一个需要覆盖整个屏幕的精灵，这样我就可以检测到一个点击并让datepinner消失。

现在的问题 -

在没有覆盖获取宽度或获得高度的情况下，我无法填满整个屏幕。 但是，当我这样做时，datepinner会因为从覆盖中获得高度而中断。 只是想知道是否有人知道如何覆盖一个组件并将所有其他组件设置为默认值。 我知道这可能看起来像一个菜鸟问题，也许我错过了一些明显的东西，我几乎是as3的新手。

这是一些代码 -

override protected function createChildren():void {
        super.createChildren();
            if(!img) {
                img = new dateButtonBG();
                addChild(img);
            }

            if (!maskSprite) {
                maskSprite =  new Sprite();
                maskSprite.graphics.beginFill(0xFFFFCC, .5);
                maskSprite.graphics.drawRect(-((stage.height)/2),-((stage.width)/2), stage.width, stage.height);
                maskSprite.graphics.endFill(); 
            }

if(!dateButton) {
                dateButton = new StyleableTextField();
                todayDate = new Date();
                BindingUtils.bindProperty(dateButton, "text", date, "selectedDate");
                dateButton.addEventListener(MouseEvent.CLICK, onDateButtonClick);
                addChild(dateButton);
            }
invalidateDisplayList();
}

protected function removeSpinner( event:Event):void{
            maskSprite.removeEventListener(MouseEvent.CLICK, removeSpinner);
            removeChild(date);
            removeChild(maskSprite);
        }

protected function onDateButtonClick (event:Event):void {
            addChild(maskSprite);
            addChild(date);
            maskSprite.addEventListener(MouseEvent.CLICK, removeSpinner);
        }

override public function get width () : Number {
            return _width;
        }

override public function get height () : Number {
            return _height;
        }

代码不完整，但仅仅是为了让我的观点得到解决。 感谢阅读和所有帮助。

编辑 - 我想出了如何做到这一点。添加一些信息以防一些人有同样的问题 - Flex将精灵（或任何UI组件）的大小限制为容器的大小。 如果你试图超过容器的大小，它只返回容器的大小。 在我的代码中 -

override public function get width () : Number {
            return _width;
        }

override public function get height () : Number {
            return _height;
        }

这通常被吹捧为超过容器大小的修复程序。 然而，这种方法存在缺陷，因为它会覆盖要求宽度和高度的所有内容。 在这种情况下，它会尝试将所有内容设置为_height和_width的大小。 对于任何具有多于1个组件的皮肤来说，这是一个很大的问题，要么您可以尝试单独设置项目的大小，这对我来说不起作用或找到替代方法。 这是有效的 -

public override function validateDisplayList():void {
            super.validateDisplayList();
            yourComponent.width = someConstantW;
            yourComponent.height = someConstantH;
        }

但这还不够。 您可能需要将组件移出容器以进行此尝试 -

override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void {
                super.layoutContents(unscaledWidth, unscaledHeight);
                setElementPosition(yourComponent, x, y);
            }

希望我救了几个小时的工作:)

Answer 1

从您发布的代码中不太清楚，但也许您应该覆盖updateDisplayList()方法而不是width和height 。

updateDisplayList()是组件实现的子生命周期方法，用于调整子对象的大小和位置。

updateDisplayList()由Flex框架调用，它传递两个值： unscaledWidth和unscaledHeight 。 您对updateDisplayList()应该遵循这些值并相应地调整子对象的大小/位置。 您应该使用其他生命周期方法（如下所示）来进行实际的尺寸调整/定位。

这是一个让您入门的示例实现。 它可能有些偏差，因为我不完全理解您提供的代码段。

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    // size/position the background (or whatever it is that should occupy the whole screen)
    background.setLayoutBoundsPosition(0,0); // unnecessary because 0,0 is default
    background.setLayoutBoundsSize(unscaledWidth, unscaledHeight);
    // size/position the text in the center
    var textWidth:Number = text.getPreferredBoundsWidth;
    var textheight:Number = text.getPreferredBoundsHeight
    text.setLayoutBoundsPosition( (unscaledWidth - textWidth)/2, (unscaledHeight - textHeight)/2 );
    text.setLayoutBoundsSize(textWidth, textHeight); // probably not necessary

}