QML中如何动态填充ListModel与ListView实现数据实时更新

问题原因 #

你的写法存在两个核心问题：

1. 普通JavaScript数组作为QML ListView的模型时没有内置变更通知机制，仅在整个数组被替换时才会触发视图刷新，后续对数组元素的增删改操作无法自动同步到视图，不满足你数据实时变化的需求。
2. Delegate中直接引用name字段错误：数组作为模型时每个元素是普通字符串，不存在name属性，需要用modelData关键字获取当前元素的值。

推荐解决方案（动态ListModel） #

优先使用Qt原生ListModel作为数据模型，它本身继承自QObject，所有操作自带变更通知，增删改数据后会自动触发ListView实时更新，完全匹配你的需求，用法如下：

// 定义空ListModel，后续动态填充数据
ListModel {
    id: userModel
}

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

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

常用动态操作方法 #

• 新增单条/批量数据：

// 新增单条
userModel.append({name: "Tony"})
// 批量新增
userModel.append([{name: "Tony"}, {name: "Stark"}])

• 修改已有数据：

// 修改索引为0的元素的name字段
userModel.setProperty(0, "name", "修改后的名字")
// 批量修改索引为0的元素的多个字段
userModel.set(0, {name: "修改后的名字"})

• 删除数据：

// 删除索引为0的元素
userModel.remove(0)
// 清空所有数据
userModel.clear()

• 插入数据：

// 在索引1的位置插入新元素
userModel.insert(1, {name: "Peter"})

数组模型兼容方案 #

如果你坚持要使用数组作为模型，调整如下即可正常运行，但变更通知能力有限，仅适合静态数据或全量更新的场景：

property var userModel: ["Tony", "Stark"]
Rectangle {
    anchors.horizontalCenter: parent.horizontalCenter
    color: "black"
    height: 500
    width: 0.95 * parent.width
    ListView {
        anchors.fill: parent
        model: userModel
        delegate: userDelegate
    }
}

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

要更新视图时需要全量替换数组：userModel = ["新值1", "新值2"]

内容的提问来源于stack exchange，提问作者Evan Krause