0

ユーザーがボタンをクリックするだけで新しいカスタム要素を追加できる Dart プロジェクトに取り組んでいます。各カスタム要素は、テーブルを含む div です。div はユーザーがサイズ変更できます。私の問題は、dart ファイルが保持する要素のリストに新しい要素が追加された後、すべての div のサイズが自動的にリセットされることです。古い要素の属性を同じに保ちながら、新しい要素をテンプレートに追加する方法はありますか?

カスタム要素のメイン div を処理する CSS コードは次のとおりです。

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

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

助けてくれてありがとう！

4

1 に答える 1

0

バッキング リストを変更すると、テンプレートは古い要素をすべて破棄して最初から再作成することを繰り返すため、ユーザーのサイズ変更情報はすべて失われます。

リストに新しいアイテムを追加すると、古い要素のすべてのサイズ情報を保存し、アイテムが追加された後に新しい要素のサイズを設定できます。

// 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];
    }
  });
}

2 つの注意事項:

  • 複数の要素に適用しているように見えるため、superDivContainer を id ではなくクラスに変更しました。それを反映するCSSを変更する必要があります
  • 1 ミリ秒のタイマーは、新しい要素が追加されてアクセス可能になるまでわずかな遅延があるという事実を回避します。
于 2013-06-27T14:51:03.930 に答える