创建动态 ListModel 是 QML

Creating dynamic ListModel is QML

我一直在尝试用我拥有的列表中的数据填充 QML 中的 ListView,但在文档中它没有显示如何动态填充 ListModel 或 ListView。列表中的数据不断变化,我打算实时更新列表,这就是为什么我不需要硬编码模型的原因。

根据教程,这个有效:

        Rectangle {
            anchors.horizontalCenter: parent.horizontalCenter
            color: "black"
            height: 500
            width: 0.95 * parent.width
            ListView {
                anchors.fill: parent
                model: fruitModel
                delegate: fruitDelegate
            }
        }

        ListModel {
            id: fruitModel
            ListElement {
                name: "Apple"
                cost: 2.45
            }
            ListElement {
                name: "Orange"
                cost: 3.25
            }
            ListElement {
                name: "Banana"
                cost: 1.95
            }
        }

        Component {
            id: fruitDelegate
            Row {
                spacing: 10
                Text { text: name; color: "white" }
                Text { text: '$' + cost; color: "white" }
            }
        }

但事实并非如此:

userModel : ["Tony", "Stark"] //list containing names of users
Rectangle {
            anchors.horizontalCenter: parent.horizontalCenter
            color: "black"
            height: 500
            width: 0.95 * parent.width
            ListView {
                anchors.fill: parent
                model: userModel // a list containing all users
                delegate: fruitDelegate
            }
}

Component {
            id: fruitDelegate
            Row {
                spacing: 10
                Text { text: name; color: "white" }
            }
}

角色定义了如何访问信息,例如 fruitModel 有 2 个角色:name 和 cost。但是当使用列表作为模型时,您必须使用 modelData 作为角色来访问信息:

Component {
    id: fruitDelegate
    Row {
        spacing: 10
        Text { text: modelData; color: "white" }
    }
}

可以通过append函数更新ListModel:

Rectangle {
    anchors.horizontalCenter: parent.horizontalCenter
    color: "black"
    height: 500
    width: 0.95 * parent.width
    ListView {
        anchors.fill: parent
        model: fruitModel
        delegate: fruitDelegate
    }
}

ListModel {
    id: fruitModel
    Component.onCompleted: {
        fruitModel.append({"name": "Tony"})
        fruitModel.append({"name": "Stark"})
    }
}

Component {
    id: fruitDelegate
    Row {
        spacing: 10
        Text { text: name; color: "white" }
    }
}