dart - 如何在文档中查找元素的大小

Question

自定义聚合物元素main-app的offsetHeight在main()中为88px。
在点击处理程序中调用相同的offsetHeight方法时，其大小为108px。
我猜这是一个时间问题。
是否有任何方法事件，可以让我在文档中的自定义聚合物元素完全准备就绪时进行回调？

main() async {
  await initPolymer();

  PaperButton pb = querySelector('paper-button');
  MainApp sa = querySelector('main-app');
  if(sa != null){
    print('main-app');
    print(sa.style.width.runtimeType);
    print('offset:' + sa.offset.toString());
    print('offsetHeight:' + sa.offsetHeight.toString());
    print('offsetWidth:' + sa.offsetWidth.toString());
    print('getBoundingClientRect:'+sa.getBoundingClientRect().toString());
    print('contentedge:'+sa.contentEdge.toString());
    print('clientHeight:'+sa.clientHeight.toString());
    print('client:'+sa.client.toString());
    print('marginEdge:'+sa.marginEdge.toString());
  }
  pb.on['tap'].listen((_) {
    print('Button tapped!');
    print('offsetHeight:' + sa.offsetHeight.toString());
  });
}

输出:

main-app
String
offset:Rectangle (8, 8) 643 x 88
offsetHeight:88
offsetWidth:643
getBoundingClientRect:Rectangle (8.0, 8.0) 642.6666870117188 x 88.0
contentedge:Rectangle (8.0, 8.0) 643 x 88
clientHeight:88
client:Rectangle (0, 0) 643 x 88
marginEdge:Rectangle (8.0, 8.0) 643 x 88
index.html:6095 Button tapped!
index.html:6095 offsetHeight:108

编辑:
尽管很笨拙，但GünterZöchbauer的新Future((){})仍然有效。
另一个不幸的发现是子节点的初始化发生在设置父节点大小之前。
在我的组件中:

attached() {
    super.attached();
    print('main-app parent offset in attached:'+parent.offset.toString());
  }

在主要方面:

print('main-app');
pb.on['tap'].listen((_) {
    print('Button tapped!');
    print('main-app parent offset:'+ sa.parent.offset.toString());
  });

输出(分别):

main-app parent offset in attached:Rectangle (0, 0) 643 x 246
main-app
Button tapped!
main-app parent offset:Rectangle (0, 0) 643 x 334

幸运的是，main的执行似乎在调用attach()的队列中，因此可以使用Future()创建一个根据父节点大小调整自身大小的组件。
希望Future()保持可靠。

另一个答案

我终于找到了!
https://github.com/dart-lang/polymer-dart/wiki/local-dom

Async operations: The insert, append, and remove operations are transacted lazily in certain cases for performance. In order to interrogate the DOM (e.g. offsetHeight, getComputedStyle, etc.) immediately after one of these operations, call PolymerDom.flush() first.

我需要PolymerDom.flush()。
但是正如我在评论中提到的那样，仍应使用Future。

Answer 1

没有为此的标准事件。通常，它的工作原理是为下一个事件循环安排代码，以允许Polymer通过将代码包装在其中来完成其工作。

new Future((){
  // your code here 
} );`

如果它是您自己的组件，则可以在 attached()中自己触发一个事件，但要确保触发该事件的代码也应该在以后进行包装(例如，如果模板未在 attached()中完成，则该模板可能会)