QtQuick javascript dictionarys的动态对象问题

Question

这里发生的事情可能是一个逻辑错误，但我已经在一小时的大部分时间内重写了这个功能而且我找不到它，而不是其他地方的其他功能重写这些值并搞砸了它。我还应该注意，元素出现在屏幕上，只是在前面的元素上。该函数应该做的是使用字典中的数据作为ui元素中的文本替换所有元素

以下是我正在采取行动https://gyazo.com/89628e6d303fc36f0a3c85f6336e03f7的问题的GIF 据我所知，这是故障函数，listItems是大白框，listitems.children [x]是有问题的孩子。

function populateTable(){
    background.total = 0
    var num = parseInt(background.total);
    var component = Qt.createComponent("Listitem.qml");
    for(var key in background.dictionary) {
        cba.text = key
        console.log(num + "num")
        var sprite = component.createObject(listItems, {"x": (listItems.width / 32 * .5)-1, "y": (listItems.height / 32 * (2.5*parseInt(background.total)))-1+(listItems.height/32)*.68, "ident": parseInt(background.total)});
        console.log(background.total + " pos, function populateTable")
        listItems.children[num].children[1].text = cba.text + ": " + search(cba.text)
        num = num+1
    }
    console.log("Opperation Completed")
}

如果有人能告诉我哪里搞砸了那会很棒，请事先感谢任何帮助

main.js：

function declareDict(){
    console.log("Creating Blank Dictionary")
    var dict = {};
    return dict;
}

function add(thing1, thing2){
    background.dictionary[thing1] = thing2;
    txtName.text = ""
    txtAddress.text = ""
}

function search(term){
    var temp = background.dictionary[term];
    console.log(temp + " function search")
    return temp;
}

function deleteAll(){
    btnDelConf.visible = true
}

function removeAll(){
    return declareDict();
}

function remove(term){
    delete background.dictionary[term];
}

function processRemove(element){
    background.pos = parseInt(background.pos)-1
    listItems.children[element].destroy()
}

function populateTable(){
    var num = 0;
    var component = Qt.createComponent("Listitem.qml");
    for(var key in background.dictionary) {
        var sprite = component.createObject(listItems, {"x": (listItems.width / 32), "y": (listItems.height / 32 * (2.5*parseInt(num)))+(listItems.height/32), "ident": parseInt(num)});
        num = num+1
    }
    console.log("Opperation Completed")
}

Listitem.qml：

import QtQuick 2.9
import QtQuick.Window 2.2
import "main.js" as JS
Rectangle {
    property int ident
    ident: index
    id: listItem
    x: 0
    y: 0
    width: parent.width / 32 * 30
    height: parent.height / 16
    color: "#000000"
    Rectangle {
        id: btnRemove
        x: parent.width / 16 * 14
        y: 0
        width: parent.width / 16 * 2
        height: parent.height
        color: "#000000"
        border.color: "#ffffff"

        MouseArea {
            id: msAreaRemove
            x: 0
            y: 0
            width: parent.width
            height: parent.height
            onClicked: {
                parent.parent.destroy()

            }
        }

        Text {
            id: txtRemove
            x: 0
            y: 0
            width: parent.width
            height: parent.height
            color: "#ffffff"
            text: qsTr("Del")
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            font.pixelSize: 12
        }
    }

    Text {
        id: dispListItem
        x: 0
        y: 0
        width: parent.width / 16 * 14
        height: parent.height
        color: "#ffffff"
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        font.pixelSize: 12
    }
}

main.qml：

import QtQuick 2.9
import QtQuick.Window 2.2
import "main.js" as JS



Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Super important thing")
    Rectangle {
        id: background
        width: parent.width
        height: parent.height
        x: 0
        y: 0
        color: "#555555"
        property int total: 0
        property var dictionary: JS.declareDict()
        TextInput {
            id: cba
            x: -10
            y: -10
            width: 0
            height: 0
            font.weight: Font.Normal
            text: ""
            echoMode: TextInput.Normal
        }

        Text {
            id: lblAddress
            x: parent.width / 32 * 17
            y: parent.height / 32 * 12
            height: parent.height / 32 * 2
            color: "#888888"
            text: qsTr("Address: ")
            font.pixelSize: height * .8
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignLeft
        }

        Text {
            id: lblName
            x: parent.width / 32 * 17
            y: parent.height / 32 * 8
            height: parent.height / 32 * 2
            color: "#888888"
            text: qsTr("Name: ")
            font.pixelSize: height * .8
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignLeft
        }

        Text {
            id: lblAddEntry
            x: parent.width / 32 * 24 - width / 2
            y: parent.height / 32 * 6
            height: parent.height / 32 * 2
            color: "#888888"
            text: qsTr("Add Entry:")
            font.pixelSize: height / 2
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
        }

        Text {
            id: lblEditAddressBook
            x: parent.width / 32 * 24 - width / 2
            y: parent.height / 32 * 3
            height: parent.height / 32 * 2
            color: "#888888"
            text: qsTr("Edit Address Book Details")
            font.pixelSize: height * .75
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
        }

        Rectangle {
            id: listItems
            x: parent.width / 32
            y: parent.height / 32 * 3
            width: parent.width / 32 * 15
            height: parent.height / 32 * 24
            color: "#ffffff"
        }

        Text {
            id: text1
            x: parent.width / 32
            y: parent.height / 32
            width: parent.width / 32 * 30
            height: parent.height / 32 * 2
            color: "#ffffff"
            text: qsTr("My Address Book")
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignLeft
            font.pixelSize: 12
        }

        Rectangle {
            id: btnAdd
            x: parent.width / 32 * 27
            y: parent.height / 32 * 10
            width: parent.width / 16 * 2
            height: parent.height / 32 * 6
            color: "#000000"
            border.color: "#000000"

            MouseArea {
                id: msAreaAdd
                x: 0
                y: 0
                width: parent.width
                height: parent.height
                onClicked: {
                    JS.add(txtName.text, txtAddress.text)
                    JS.populateTable()
                }
                KeyNavigation.tab: txtNameSearch
                KeyNavigation.backtab: txtAddress
            }

            Text {
                id: txtAddBtn
                x: 0
                y: 0
                width: parent.width
                height: parent.height
                color: "#ffffff"
                text: qsTr("Add")
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                font.pixelSize: 12
            }
        }
        Rectangle {
            id: boxName
            x: parent.width / 32 * 17
            y: parent.height / 32 * 10
            width: parent.width / 32 * 10
            height: parent.height / 32 * 2
            color: "#ffffff"
            border.color: "#007700"
            TextInput {
                id: txtName
                x: 0
                y: 0
                width: parent.width
                height: parent.height
                maximumLength: 24
                horizontalAlignment: Text.AlignHCenter
                font.weight: Font.Normal
                text: ""
                KeyNavigation.tab: txtAddress
                KeyNavigation.backtab: msAreaSearch
                echoMode: TextInput.Normal
                font.pixelSize: height / 8 * 6
            }
        }
        Rectangle {
            id: boxAddress
            x: parent.width / 32 * 17
            y: parent.height / 32 * 14
            width: parent.width / 32 * 10
            height: parent.height / 32 * 2
            color: "#ffffff"
            border.color: "#007700"
            TextInput {
                id: txtAddress
                x: 0
                y: 0
                width: parent.width
                height: parent.height
                maximumLength: 24
                horizontalAlignment: Text.AlignHCenter
                font.weight: Font.Normal
                text: ""
                KeyNavigation.tab: msAreaAdd
                KeyNavigation.backtab: txtName
                echoMode: TextInput.Normal
                font.pixelSize: height / 8 * 6
            }
        }
        Rectangle {
            id: boxNameSearch
            x: parent.width / 32
            y: parent.height / 32 * 28
            width: parent.width / 32 * 11
            height: parent.height / 32 * 2
            color: "#ffffff"
            border.color: "#007700"
            TextInput {
                id: txtNameSearch
                x: 0
                y: 0
                width: parent.width
                height: parent.height
                maximumLength: txtName.maximumLength
                horizontalAlignment: Text.AlignHCenter
                font.weight: Font.Normal
                text: ""
                KeyNavigation.tab: msAreaSearch
                KeyNavigation.backtab: msAreaAdd
                echoMode: TextInput.Normal
                font.pixelSize: height / 8 * 6
            }
        }
        Rectangle {
            id: btnSearch
            x: parent.width / 32 * 12
            y: parent.height / 32 * 28
            width: parent.width / 16 * 2
            height: parent.height / 32 * 2
            color: "#000000"
            border.color: "#000000"

            MouseArea {
                id: msAreaSearch
                x: 0
                y: 0
                width: parent.width
                height: parent.height
                onClicked: {
                    JS.search(txtNameSearch.text)
                    txtNameSearch.text = ""
                }
                KeyNavigation.tab: txtName
                KeyNavigation.backtab: txtNameSearch
            }

            Text {
                id: txtSearchBtn
                x: 0
                y: 0
                width: parent.width
                height: parent.height
                color: "#ffffff"
                text: qsTr("Search")
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                font.pixelSize: 12
            }
        }

        Rectangle {
            id: btnDelAll
            x: parent.width / 32 * 17
            y: parent.height / 32 * 28
            width: parent.width / 32 * 14
            height: parent.height / 32 * 2
            color: "#000000"
            border.color: "#ff0000"

            MouseArea {
                id: msAreaDelAll
                x: 0
                y: 0
                width: parent.width
                height: parent.height
                onClicked: {
                    JS.deleteAll()
                }
            }

            Text {
                id: txtDelAllBtn
                x: 0
                y: 0
                width: parent.width
                height: parent.height
                color: "#ffffff"
                text: qsTr("Delete All")
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                font.pixelSize: 12
            }
        }

        Rectangle {
            id: btnDelConf
            x: parent.width / 32 * 17
            y: parent.height / 32 * 28
            width: parent.width / 32 * 14
            height: parent.height / 32 * 2
            color: "#ff0000"
            border.color: "#ff6600"
            visible: false

            MouseArea {
                id: msAreaDelConf
                x: 0
                y: 0
                width: parent.width
                height: parent.height
                onClicked: {
                    background.dictionary = JS.removeAll()
                    btnDelConf.visible = false
                }
            }

            Text {
                id: txtDelAllConf
                x: 0
                y: 0
                width: parent.width
                height: parent.height
                color: "#000000"
                text: qsTr("Clicking Again Will Delete Everything")
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                font.pixelSize: 12
            }
        }
    }
}

这是项目的保管箱链接： https://www.dropbox.com/s/ky95ttlfmf5qhwl/DataStructuresAssessment4Version3.zip?dl=0