0
votes

I have a QML ListView, and I'm trying to dynamically add elements to it. I want the background rectangle to also scale dynamically as elements are added/removed from the ListView. Right now I get a binding loop, and I understand what they are but I can't figure out where it's coming from. I played around changing the code a bit and I was able to get rid of the binding loop one time but then the ListView couldn't be scrolled. Anyone have any ideas?

import QtQuick 2.15
import QtQuick.Window 2.0

Window {
  visible: true
  width: 800
  height: 800

      Rectangle {
          id: listContainer
          height: childrenRect.height
          width: parent.width
          color: "transparent"
          anchors {
              top: parent.top
              topMargin: 30
              left: parent.left
              leftMargin: 45
          }

          ListView {
              anchors.top: parent.top
              anchors.left: parent.left
              anchors.right: parent.right
              model: myModel
              height: childrenRect.height
              header:
                  Text {
                    z: 2
                    height: 50
                    text: "HEADER"
                    color: "black"

              }
              delegate:  Component {
                  Item {
                      Text {
                          id:  userName;
                          text: name;
                          color: "black";
                          font.pixelSize: 50
                          anchors {
                              left: parent.left
                              leftMargin: 20
                          }
                      }
                      
                      Rectangle {
                          height: 1
                          color: 'black'
                          width: listContainer.width
                          anchors {
                              left:  userName.left
                              top:  userName.top
                              topMargin: - 12
                              leftMargin: -15
                          }
                      }
                  }
              }
              spacing: 80
          }
      }

      ListModel {
          id: myModel
      }

      /* Fill the model with default values on startup */
      Component.onCompleted: {
          for (var i = 0; i < 100; i++) {
              myModel.append({
                  name: "Big Animal : " + i
              })
          }
      }
}