main（）中自定義聚合物元素main-app的offsetHeight是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

編輯： 岡特Zö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

幸運的主要執行似乎是在附連點處的隊列（）被調用，因此使用Future（）可以創建一個基於父節點大小調整自身大小的組件。
Hope Future（）保持可靠。

另一個答案

我終於找到它！ https://github.com/dart-lang/polymer-dart/wiki/local-dom

異步操作：插入，追加和刪除操作在某些情況下由於性能懶洋洋地辦理。爲了在這些操作之一之後立即詢問DOM（例如offsetHeight，getComputedStyle等），首先調用PolymerDom.flush（）。

PolymerDom.flush（）是我所需要的。但正如我在評論中提到的那樣，仍然應該使用Future。

來源

2015-12-28 TastyCatFood

您可以回答自己的問題，並使其成爲接受的答案（延遲一段時間後）。 –

謝謝你讓我知道，並且非常感謝你的回答。 – TastyCatFood

事情是，而「PolymerDom。flush（）「僅僅是一個更適合我的問題的答案，它並不總是足夠的，因爲組件在main（）被執行之前被初始化（嗯，你確定知道這一點）所以調用flush一個真正的答案可能是錯誤的，因爲它只是答案的一半：稍後添加的元素可能會改變組件的大小等。 – TastyCatFood

這裏沒有標準事件。通常，它的工作原理是隻安排你的代碼下一個事件循環，使聚合物通過包裝你的代碼

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

完成自己的工作。如果這是你自己的組件，你可以激發自己的事件attached()但可以肯定的代碼引發的事件應該在未來進行包裝（如果/例如可能不會在attached()中完成，則模板可能未完成）

來源

2015-12-28 10:05:33

如何查找文檔中元素的大小

另一個答案

回答

相關問題