一、前言
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
作者水平有限,如有错误,欢迎指出