11、QML的模型、视图和委托（Model, View, Delegate）

一、前言

Model-View-Controller (MVC) 是源自SmallTalk的一个设计模式，在构建用户界面时经常用到。把功能相近的部分归结在一起，不相近的部分进行隔离。MVC 将系统分解为模型、视图、控制器三部分，每一部分相对独立，职责单一，在实现过程中可以专注于MVC各自的核心逻辑。MVC的最基本的作用就是解耦。

模型（Model）代表数据。视图（View）代表界面的布局。控制器（Controller ）界面的具体显示样式，和用户进行具体的交互。

QML对Controller部分做了改动，引入了Delegate，合起来就是Model-View-Delegate。模型还是负责提供数据，视图则负责基本的布局管理，剩下显示样式由Delegate实现。

Model-View-Delegate的框架如下图：

model负责提供数据，view负责数据的具体显示位置，delegate和用户交互，负责编辑数据和具体的显示样式

类比到web前端，View提供了布局(html)，Delegate提供了样式(css)，model则提供数据(data)，在mvc中, 不仅数据与显示要分离, 在显示中, 布局与样式也要分离, 布局指的是大的框架背景, 元素的排列组合方式和定位模式, 而样式指的是子元素的颜色, 字体, 滤镜等效果。

 

二、示例

MVD（Model, View, Delegate）模式中最基本的控件就是Repeater。比如下面的代码

Box.qml

Rectangle {
    id:root
    height: 50
    width: 80
    color: "blue"

    Text {
        id: label
        anchors.centerIn: parent
    }
    property alias text: label.text
    property color fontcolor: "black"
}

main.qml

Window {
    visible: true
    id:root
    width: 640
    height: 480
    Column {
        anchors.centerIn: parent
        spacing: 2

        Repeater {
            model:10
            delegate:Box {
                text: index
                height: 40
                width: 100
            }
        }
    }
}

上述代码中model就是10，view由column设置，而delegate就是Box

model也可以更改，更改后，delegate显示也跟着变化

1、将model改为字符串的数组

Repeater {
        model:["Enterprise", "Columbia", "Challenger", "Discovery", "Endeavour", "Atlantis"]
        delegate:Box {
                text: modelData +' '+ index
                height: 40
                width: 100
            }
        }

 

2、将model更改为ListModel和ListElement的组合

        Repeater {
            /*model:["Enterprise", "Columbia", "Challenger", "Discovery", "Endeavour",
                "Atlantis"]*/
            model:ListModel {
                ListElement { name: "Mercury"; surfaceColor: "gray" }
                ListElement { name: "Venus"; surfaceColor: "yellow" }
                ListElement { name: "Earth"; surfaceColor: "blue" }
                ListElement { name: "Mars"; surfaceColor: "orange" }
                ListElement { name: "Jupiter"; surfaceColor: "orange" }
                ListElement { name: "Saturn"; surfaceColor: "yellow" }
                ListElement { name: "Uranus"; surfaceColor: "lightBlue" }
                ListElement { name: "Neptune"; surfaceColor: "lightBlue" }
            }

            delegate:Box {
                text:name
                height: 40
                width: 150

                Box {
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.leftMargin: 4
                    width: 16
                    height: 16
                    radius: 8
                    color: surfaceColor
                }
            }
        }

ListModel是容纳ListElement的简单容器，每个定义都包含数据。ListElement是在ListModel中定义的，表示ListModel中的数据。

ListModel中元素的数量可以从count属性中获得。ListModel还提供了其他方法来操作ListElement，包括append()、insert()、move()、remove()和set()。

 

参考

《qml book》

https://www.cnblogs.com/linuxAndMcu/p/13595298.html

https://cloud.tencent.com/developer/article/1360444

作者水平有限，如有错误，欢迎指出