QML进阶教程：五、模型-视图-代理（MVD）

最新推荐文章于 2025-06-18 14:43:59 发布

52_赫兹的鲸

最新推荐文章于 2025-06-18 14:43:59 发布

阅读量3.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： QT QML

本文链接：https://blog.youkuaiyun.com/qq_40194498/article/details/80043763

QT 同时被 2 个专栏收录

117 篇文章

订阅专栏

QML

15 篇文章

订阅专栏

本文介绍了QtQuick中MVC模式的应用，详细解释了模型（Model）、视图（View）和代理（Delegate）的作用，并提供了基本模型（BasicModel）与链表模型的实现示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

在编程实践中，我们经常会有意无意的运用MVC模式（模型(Model)、视图(View)和控制器(Controller)），而在QtQuick中，数据通过model-view（模型-视图）分离。对于每个view（视图），每个数据元素的可视化都分给一个代理（delegate）。
在QML中，model（模型）与view（视图）都通过delegate（代理）连接起来。功
能划分如下，model（模型）提供数据。对于每个数据项，可能有多个值。显示在
view（视图）中的每项数据,都是通过delegate（代理）来实现可视化。view（视
图）的任务是排列这些delegate（代理），每个delegate（代理）将model item（模型项）的值显示给用户。

一、基础模型（Basic Model）

最基本的实现：使用repeater元素用于实现子元素的标号。每个子元素都拥有一个可以访问的属性index，用于区分不同的子元素。在下面的例子中，一个repeater元素创建了10个子项，子项的数量由model属性控制。对于每个子项Rectangle包含了一个Text元素，你可以将text属性设置为index的值，因此可以看到子项的编号是0~9。

import QtQuick 2.0
import "BlueBox.qml"//使用自定义组件
Column {
    spacing: 8

    Repeater {
        model: ["Enterprise", "Colombia", "Challenger", "Discovery", "Endeavour", "Atlantis"]

        BlueBox {
            width: 100
            height: 32
            radius: 3

            text: modelData + ' (' + index + ')'
        }
    }
}

BlueBox源码：

import QtQuick 2.0

Rectangle {
    id: root
    width: 64
    height: 64
    color: "#157efb"
    border.color: Qt.darker(color, 1.2)
    //声明属性的别名
    property alias text: label.text
    //声明自定义属性
    property color fontColor: '#1f1f1f'
    Text {
        id: label
        anchors.centerIn: parent
        font.pixelSize: 14
        color: root.fontColor
    }
}

二、链表模型

import QtQuick 2.0
import "../common"

Background {
    width: 180
    height: 300

    ListView {
        anchors.fill: parent
        anchors.margins: 20

        clip: true//可裁剪
        model: 100//整数，提供给代理使用的索引值（index ）

        delegate: numberDelegate
        spacing: 5
    }

    Component {
        id: numberDelegate

        GreenBox {
            width: 40
            height: 40
            text: index
        }
    }
}

效果如下：
这里写图片描述

每个数据的入口是模型，视图通过可视化代理来实现数据的可视化。将数据从显示中分离出来。一个模型可以是一个整数，提供给代理使用的索引值（index ）。如果JavaScript数组被作为一个模型，模型数据变量（modelData）代表了数组的数据的当前索引。对于更加复杂的情况，每个数据项需要提供多个值，使用链表模型（ListModel）与链表元（ListElement）是一个更好的解决办法。对于静态模型，一个Repeater可以被用作视图。它可以非常方便的使用行（Row），（Column），栅格（Grid），或者流（Flow）来创建用户界面。对于动态或者大的数据模型，使用ListView或者GridView更加适合。它们会在需要时动态的创建代理，减少在场景下一次显示的元素的数量。