另一个答案

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的新未来（（）{}）有效，虽然它很笨拙。
另一个令人遗憾的发现是子节点的初始化发生在父节点大小设置之前。在我的组件中：

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（）创建一个基于父节点大小调整自身大小的组件。
希望未来（）保持可靠。

另一个答案

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

异步操作：插入，追加和删除操作是在某些情况下懒惰地进行交易以获得表现。为了询问DOM（例如offsetHeight，getComputedStyle等）在其中一个操作之后立即调用PolymerDom.flush（）第一

PolymerDom.flush（）就是我所需要的。但正如我在评论中提到的，还应该使用Future。

Answer 1

此处没有标准事件。通常它只是为下一个事件循环安排代码，以允许Polymer通过将代码包装在

中来完成其工作

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

如果它是您自己的组件，您可以自己在attached()中触发一个事件，但是为了确保触发事件的代码也应该在将来被包装（如果/例如，可能无法在{ {1}}）

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

另一个答案

1 个答案: