actionscript-3 - 只为一个组件覆盖获取宽度或高度 - Flex Mobile

Question

只是关于我正在尝试做的事情的一些背景知识。我有一个自定义皮肤，其中有一个可设置样式的文本字段来显示日期。单击与日期绑定(bind)的样式文本字段时，会出现一个日期微调器。在 datespinner 后面，我绘制了一个 Sprite ，它需要覆盖整个屏幕，这样我才能检测到点击并让 datespinner 消失。

现在的问题-

如果不覆盖获取宽度或获取高度，我无法填满整个屏幕。但是，当我这样做时，datespinner 会中断，因为它从覆盖中获取了高度。只是想知道是否有人知道一种只覆盖一个组件并将所有其他组件设置为默认值的方法。我知道这可能看起来像是一个菜鸟问题，也许我遗漏了一些明显的东西，我对 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 将 Sprite (或任何 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() 是组件实现的 Flex 生命周期方法，用于调整其子对象的大小和位置。

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

}