Question

我正在开发Dart项目，用户只需点击一下按钮即可添加新的自定义元素。每个自定义元素都是包含表格的div。 div可由用户调整大小。我的问题是，在我的dart文件保存的元素列表中添加了一个新元素后，所有div的大小都会自动重置。有没有办法在模板中添加新元素，同时保持旧元素的属性相同？

这是我的CSS代码，它处理我的自定义元素中的主要div：

#superDivContainer {
  border: 2px solid black; 
  resize: both;
  display: inline-block;
}

#tableContainer {  
  height: 125px;
  overflow: scroll;
}

提前感谢您的帮助！

Answer 1

当您更改支持列表时，模板会重复，销毁所有旧元素并从头开始重新创建它们，因此所有用户调整大小信息都会丢失。

当您向列表中添加新项目时，您可以存储旧元素的所有大小调整信息，然后在添加项目后设置新元素大小：

// Stores size information
List<List> sizes = [];

void add() {
  // Store the old sizes
  sizes.clear();
  ElementList divs = queryAll(".superDivContainer");
  for(int i = 0; i < divs.toList().length; i++) {
    Element div = divs[i];
    sizes.add([div.style.width, div.style.height]);
  }

  // Add the new item
  yourList.add("new");

  // Set the sizes of the new elements
  Timer timer = new Timer(new Duration(milliseconds: 1), () {
    divs = queryAll(".superDivContainer");
    for(int i = 0; i < divs.toList().length && i < sizes.length; i++) {
      Element div = divs[i];
      div.style.width = sizes[i][0];
      div.style.height = sizes[i][1];
    }
  });
}

两个注释：

我将superDivContainer更改为类而不是id，因为它似乎是将它应用于多个元素;你需要改变你的CSS反映
1毫秒计时器绕过这样一个事实：在添加和访问新元素之前有一个小延迟

在迭代的dart模板中保留css属性

1 个答案: