Dart 是否可以创建自定义的<；ul>；使用不同的布局算法？

我正在尝试创建具有以下特征的自定义web组件：

• 可以有多个子
  元素（如
  和
  ）
• 具有子元素的自定义布局算法。确切地说，我想根据渲染的大小来布局
  元素，因此我需要一种方法来测量每个子元素的大小

我一直在尝试CSS和polymer.dart，但现在我几乎被卡住了。有没有办法用polymer.dart创建这样的元素

当前实现的渲染方式如下图所示：

每个框都是带有绝对坐标的

元素。这些框目前是随机放置的，但我真正想做的是布局每个框，使它们不会相互重叠

当前的问题是，在实际渲染之前，我无法测量每个子对象的大小。我尝试使用隐藏的虚拟元素来预先测量大小，但似乎polymer直到之后才更新DOM，所以我甚至不能使用虚拟元素

---

当前的实现可以在上找到。我正在试验的组件是

（自定义

组件）和

（自定义

组件）。

元素在渲染之前没有大小。
渲染元素后，仍然可以修改大小

我删除了我的评论，但我仍然认为这与聚合物无关

根据您的评论编辑 好的，这与聚合物有关。 您不能期望StackOverflow上的某个人检查您的项目。您应该提供一个最小的示例，允许重现您的问题，而不是指向包含整个项目的存储库的链接

我认为两个两通的布局是你唯一的选择。 如果这是您的方法：

• 您可以查询元素并更新HTML绑定到的字段。 这可能很棘手，因为它们是使用

  模板重复生成的。也许
  mutationobserver
  在这里很有用（我自己还没用过）

• 您可以在重复的

  li

  中尝试绑定，该绑定使用组件的模型（

  Remark

  ）调用组件的方法，这样您就可以将组件及其大小识别为参数（不知道是否有效），并相应地更新remarkLists位置。如果可观察到存储位置的对象，则应启动重新渲染器。您必须小心，这不会导致无休止的更新循环

  ---

多亏了Günter，我能够使用

MutationObserver

实现一个定制的

（确切地说是一个
包装web组件），它工作得非常好

我制作了一个示例项目，演示了如果有人感兴趣，我如何将
MutationObserver
与Polymer.dart一起使用


在示例中，我使用了
MutationObserver
，如下所示：

@覆盖
无效输入视图（）{
super.enteredView（）；
_root=shadowRoot.querySelector（“#root”）；
//观察2通道布局方法的子元素变化
var mo=新的突变观察者（onChildMutation）；
mo.observe（_root，childList:true）；
_观察者=mo；
}
///当目标元素发生突变时调用
void onChildMutation（列表更改、MutationObserver观察员）{
//根据其渲染大小布局子对象
int itemCount=0；
int bounceBackDelta=bouncebacknum-1；
int nextBounceBack=反弹回增量；
int xOffset=0；
int-yOffset=0；
bool offsetRight=true；
for（变化中的var记录）{
添加的var=记录。添加的节点；
var removed=record.removedNodes；
对于（添加了变量a）{
如果（！（a.nodeType==Node.ELEMENT\u Node&&a是CustomListItem））{
//忽略我们想要的节点以外的节点
继续；
}
var elem=a作为CustomListItem；
变量宽度=elem.clientWidth；
变量高度=元素clientHeight；
//打印（${width}x${height}”）；
var unit=“px”；
如果（输入要素项）{
//此项目已显示
//因此，将视图放置在相同的位置
var l=“${elem.item.rect.left}${unit}”；
var t=“${elem.item.rect.top}${unit}”；
elem.style.left=l；
elem.style.top=t；
}否则{
//这个项目是新的。
//在足够的位置布置备注
矩形正矩形；
if（离岸）{
posRect=新矩形（xOffset、yOffset、宽度、高度）；
}否则{
posRect=新矩形（xOffset-width、yOffset、width、height）；
}
var l=“${posRect.left}${unit}”；
var t=“${posRect.top}${unit}”；
elem.style.left=l；
elem.style.top=t；
elem.item.rect=posRect；
应用图像（elem，“fadein”，250）；
elem.item.entered=真；
}
//根据方向更新偏移
if（离岸）{
xOffset+=宽度；
}否则{
xOffset-=宽度；
}
//更新反弹状态
if（offsetRight&&itemCount==nextBounceBack）{
offsetRight=false；
xOffset-=宽度；
nextBounceBack+=反弹回增量；
}如果（！offsetRight&&itemCount==nextBounceBack），则为else{
offsetRight=true；
xOffset+=宽度；
nextBounceBack+=反弹回增量；
}