如何查找用作弹出窗口的动态 flex 组件的高度

Question

我创建了一个自定义组件，其中包含几个用作工具提示的内联项呈现器。组件的高度未知，因为组件的数据内容直到运行时才知道。

但是，在显示工具提示时，有时它会超出 Flash 应用程序的边界，因此，我希望能够检测到这种情况并重新定位提示。

问题在于组件的高度和宽度显然在被弹出管理器呈现之后才可用。 （即它们总是 0）

但是，我不知道有什么方法可以找出实际呈现弹出窗口的时间以及可用的高度/宽度值。

我尝试向组件添加一个调整大小事件侦听器，但它似乎不起作用，尽管我肯定做错了什么，因为在我看来调整大小事件只给你“oldWidth”和“ oldHeight”，在第一次显示时，它会是 0...对我来说没用。

关于如何进行的任何想法？

-----编辑----- 我有一个这样的基类：

public class TTComponent extends Canvas
{
  var _parentC:UIComponent;
  var popped:Boolean = false;
  var timer:Timer;
  var _comp:UIComponent;

  public function set parentComponent(pC:UIComponent):void 
  {
    _parentC = pc;
    _parentC.addEventListener(MouseEvent.MOUSE_OUT, mouseOut);
    _parentC.addEventListener(MouseEvent.MOUSE_OVER, mouseOver);
  }
  public function mouseOver(evt:MouseEvent):void
  {
    if (_parentC != null)
    {
      timer = new Timer(150,1);
      _comp = this;
      timer.addEventListener(TimerEvent.TIMER_COMPLETE, function( tevt:TimerEvent ):void 
      {
        this.move( somex, somey);
        if (popped != true)
        {
           PopUpManager.addPopUp(_comp, parentComponent );
           popped = true;
        });
        timer.start();
    }
  }

  public function mouseOut(evt:MouseEvent ):void
  {
    if ( timer )
    {
      timer.stop();
      timer = null;
    }
    //If we popped up, remove the popup
    if ( popped )
    {
      PopUpManager.removePopUp( _comp );
      popped = false;
      parentC .removeEventListener(MouseEvent.MOUSE_OUT, mouseOut);
      parentC .removeEventListener(MouseEvent.MOUSE_OVER, mouseOver);
    }
  }
}

然后，像这样的扩展渲染器：

<c:TTComponent name="T" xmlns:fx="http://ns.adobe.com/mxml/2009" 
                          xmlns:s="library://ns.adobe.com/flex/spark" 
                          xmlns:mx="library://ns.adobe.com/flex/mx" 
                          xmlns:c="components.*">
  <s:BorderContainer>
    ...about 30 labels grouped in various manners
    ...2 lists with inline item renderers
  </s:BorderContainer>
</c:TTComponent>

现在，代码是这样调用的：

var w = new TTComponent();
w.data = data;
win.parentComponent = this;

这将为父级上的鼠标悬停和鼠标移出事件添加侦听器，无论它是什么，然后相应地显示或隐藏工具提示。

-----编辑------

使用下面评论者建议的部分内容，这是我想出的解决方案：

在 TTComponent 类内部：

import flash.events.Event;
import mx.binding.utils.ChangeWatcher;

private var heightWatcher:ChangeWatcher;


public function set parentComponent 
{
  ...
  heightWatcher = ChangeWatcher.watch(this,'height',onSizeChange);
}

public function onSizeChange(evt:Event):void
{
  if (this.height != 0)
  {
    ....calculate the new component coords
    this.move(newx, newy);
  }
}

请注意，此附加代码不会绑定到任何组件变量，它只是在组件属性上添加一个观察器。

Answer 1

您也可以尝试绑定宽度和高度。如果这些在你的类中是可绑定的，flex 会自动调整你的弹出窗口的宽度和高度。

使用 mxml 进行绑定时，您可以这样做

<mx:YourComponent height="{HeightOfYourTooltip}" width="{WidthOfYourTooltip}"></mx:YourComponent>

如果你想重新定位你的组件，你还可以添加一个监听更改事件的 eventListener，就像这样

<mx:YourComponent height="{HeightOfYourTooltip}" width="{WidthOfYourTooltip}" change="yourComponentResizeHandler()"></mx:YourComponent>

如果您使用的是编程方法，则应该使用 changewatcher。下面展示了如何使用它。

ChangeWatcher.watch(YourComponent, "width", repositionHandler);
ChangeWatcher.watch(YourComponent, "height", repositionHandler);

如果您想观察其他变量或属性的变化，请务必在类中的变量上方添加 [Bindable]-tag，如下所示

[Bindable]
var myVariable:SomeVariable;

我希望这会有所帮助。

Answer 2

为了显示你在 itemRenderer 中使用了哪些控件的 toolTip？文字还是标签？

Answer 3

尝试监听该组件的更新完成事件。愿这能帮助你。 :)

Answer 4

这可能很混乱，但是在弹出组件上，您可以在完成触发后添加一个事件侦听器，如果高度或宽度== 0 然后您 setTimeout() 在说 100 毫秒后将其设置为一个函数，直到您获得有效数据.

是的，我知道这有点小技巧，但这些最终会报告正确的测量值，所以它不会调用那么多次。

如果您在截止日期前或类似的情况下只是一个想法并不重要。 :)