QML开发：数据模型

最新推荐文章于 2025-11-24 18:38:05 发布

原创

最新推荐文章于 2025-11-24 18:38:05 发布 · 1.1k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#qt

文章目录

一、概念

对于开发用户界面，最重要的一方面是保持数据与可视化的分离。例如，一个电话薄可以使用一个垂直文本链表排列或者使用一个网格联系人图片排列。在这两个案例中，数据都是相同的，但是可视化效果却是不同的。这种方法通常被称作model-view（模型-视图）模式。在这种模式中，数据通常被称作model（模型），可视化处理称作view（视图）。
在QML中，model（模型）与view（视图）都通过delegate（代理）连接起来。功能划分如下，model（模型）提供数据。对于每个数据项，可能有多个值。在上面的电话薄例子中，每个电话薄条目对应一个名字，一个图片和一个号码。显示在view（视图）中的每项数据,都是通过delegate（代理）来实现可视化。view（视图）的任务是排列这些delegate（代理），每个delegate（代理）将model item（模型项）的值显示给用户。

常见的 MVC 关系：

Model（模型）：存放数据

View（视图）：显示数据（如 ListView、GridView、Repeater）

Delegate（委托）：定义数据在视图中的显示方式

二、常用基础模型详解

3.1 模型 ListModel 的介绍和使用
ListModel 是 QML 提供的一种基础数据模型，常与 ListView、Repeater、GridView 等视图型元素配合使用，用来存储一组有序的数据项（ListElement），每个数据项是一个键值对集合。

基本特点：

纯 QML 实现，不需要写 C++ 代码即可管理数据。

数据项是由键-值对组成的 ListElement。

支持动态增删改数据项。

与视图绑定后，数据变化会自动刷新 UI。

适合中小型数据（因为数据都存储在内存中）。

每个 ListElement 中的属性名会映射到 delegate（代理）中。

基本语法：

ListModel {
   
   
    id: fruitModel

    ListElement {
   
    name: "Apple";  cost: 2.5; color: "red" }
    ListElement {
   
    name: "Banana"; cost: 1.5; color: "yellow" }
    ListElement {
   
    name: "Orange"; cost: 3.0; color: "orange" }
}

每个 ListElement 表示一行数据。

属性名（如 name、cost、color）是列名。

类型可以是数字、字符串、布尔值。

动态操作 API：

append(object)：追加一个元素

insert(index, object)：插入到指定位置

set(index, object)：修改某一行数据

get(index)：获取指定行数据

remove(index)：删除指定行

clear()：清空所有数据

count：当前数据条目数

配合 ListView 使用：

import QtQuick 2.12
import QtQuick.Controls 2.12

ApplicationWindow {
   
   
    visible: true
    width: 300
    height: 300

    ListModel {
   
   
        id: fruitModel
        ListElement {
   
    name: "Apple"; color: "Red" }
        ListElement {
   
    name: "Banana"; color: "Yellow" }
        ListElement {
   
    name: "Grape"; color: "Purple" }
    }

    ListView {
   
   
        anchors.fill: parent
        model: fruitModel
        delegate: Rectangle {
   
   
            height: 40
            width: parent.width
            color: color
            Text {
   
   
                anchors.centerIn: parent
                text: name
                color: "white"
            }
        }
    }
}

运行效果：会显示一个彩色的水果列表，每行背景色就是对应的 color，文字是 name。

ListModel 和 ListView 交互的数据流示意图：
在这里插入图片描述
动态操作数据：

// 添加数据
fruitModel.append({
   
    "name": "Grape", "cost": 4.0, "color": "purple" })

// 插入数据
fruitModel.insert(1, {
   
    "name": "Mango", "cost": 5.0, "color": "orange" })

// 修改数据
fruitModel.setProperty(0, "cost", 2.8)

// 删除数据
fruitModel.remove(2)

// 获取数据
console.log(fruitModel.get(1).name) // Mango

3.2 什么是 JavaScript 数组模型？
QML 里，你可以直接用 JavaScript 的数组（数组里可以是基本类型，也可以是对象）作为视图（ListView、Repeater 等）的数据模型。这种方式灵活，适合快速展示简单或中等复杂度的数据。

JavaScript 数组模型示例：

import QtQuick 2.12
import QtQuick.Controls 2.12

ListView {
   
   
    width: 200
    height: 300

    model: [
        {
   
    "name": "Alice", "age": 20 },
        {
   
    "name": "Bob", "age": 25