3

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

现在的问题-

如果不覆盖获取宽度或获取高度，我无法填满整个屏幕。但是，当我这样做时，日期微调器会中断，因为它会从覆盖中获取高度。只是想知道是否有人知道一种方法来覆盖一个组件并将所有其他组件设置为其默认值。我知道这似乎是一个菜鸟问题，也许我遗漏了一些明显的东西，我对 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);
            }

希望我为某人节​​省了几个小时的工作:)

4

1 回答 1

0

从您发布的代码中不太清楚，但也许您应该覆盖该updateDisplayList()方法而不是widthand 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

}
于 2012-10-19T17:23:29.763 回答