创建动态 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" }
}
}
我一直在尝试用我拥有的列表中的数据填充 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" }
}
}