在视图或布局中显示大量QML项的最佳方法

Question

目前我正在使用面部识别并且必须为GUI创建模块，每次识别到面部时我需要显示具有不同字符串的新项目，并且图像也需要多次显示，什么是最好的方法呢？这是项目：

Item{
    width: 300
    height: 300
    property string names;

Rectangle{
    property int yvalue;
    id: firstrect
    x: 29
    y: yvalue
    width: 300
    height: 300
    color: "white"
    border.color: "#d3d3d3"
    border.width: 5
    visible: true
    //property values to pass to grid elements when needed
    property string name : names;
    property string matchpercentage;
    property string conflevel;
    property string firstrectcolor;
    property string secondrectcolor;
    property int progressValue;
    property bool startAnim;
    Timer{
        running: true
        repeat: true
        interval: 6000
        onTriggered: {
            coloranim1.to = "white"
            coloranim1.running = true

        }
    }

    ColorAnimation on color {
        id: coloranim
        to: "light blue"
        duration: 1000
        running: if(firstrect.visible === true)
                 {
                     true
                 }
                 else
                     false
        loops: 1
    }
    ColorAnimation on color {
        id: coloranim1
        to: "white"
        duration: 1000
        running: if(firstrect.visible === true)
                 {
                     true
                 }
                 else
                     false
        loops: 1
    }
//                    SequentialAnimation{
//                        running: if(firstrect.visible === true)
//                                 {
//                                     true
//                                 }
//                                 else
//                                     false

//                        ColorAnimation {
//                            to: "light blue"
//                            from:
//                            duration: 2000
//                        }

//                        ColorAnimation {
//                            to: "white"
//                            duration: 1000
//                        }
//                    }

    MouseArea{
        anchors.fill: parent
    }
    Image{
        id: infoicon
        x: 263
        y: 264
        width: 31
        height: 30
//        source: infomarea.containsMouse ?  "infoiconhover.png" : "infoicon.png"
        MouseArea{
            id: infomarea
            anchors.fill: parent
            hoverEnabled: true
            onClicked: {
                userinf.visible = true
                userinf.textinputnameuserinfo.text = firstrect.name
            }
        }
    }

    Rectangle{
        id: firstimage
        x: 10
        y: 14
        width: 139
        height: 129
        color: "light grey"
        border.color: if(parent.firstrectcolor === "")
                      {
                          "#b72c2f"
                      }
                      else
                      parent.firstrectcolor
        border.width: 3
        Image {
            width: 135
            height: 125
            anchors.centerIn: parent
//            source: "1_Josh.png"
        }
    }
    Rectangle{
        id: secimage
        x: 153
        y: 14
        width: 139
        height: 129
        color: "light grey"
        border.color: "#b72c2f"
        border.width: 3
        Image {
            width: 135
            height: 125
            anchors.centerIn: parent
//            source: "5_Josh.png"
        }
    }

    TextInput {
        id: textInputname
        x: 10
        y: 181
        width: 180
        height: 18
        text: parent.name
        font.family: "Arial"
        horizontalAlignment: Text.AlignLeft
        font.pixelSize: 14
        z: 1
        readOnly: true
    }

    TextInput {
        id: textInputmatchpercentage
        x: 120
        y: 210
        width: 63
        height: 20
        text: parent.matchpercentage
        font.family: "Arial"
        horizontalAlignment: Text.AlignHCenter
        font.pixelSize: 20
        z: 1
        readOnly: true
    }

    Text {
        id: text1
        x: 10
        y: 211
        width: 111
        height: 14
        text: qsTr("Match Percentage:")
        font.family: "Arial"
        font.pixelSize: 14

    }
//    SimpleProgressBar{
//        id: progress
//        x: 92
//        y: 254
//        width: 100
//        height: 16
//        color: if(progress.value >= 50)
//               {
//                   "light green"
//               }
//               else if(progress.value < 50){
//                    "red"
//               }
//        value: parent.progressValue
//    }
}
}