QML 模型视图
在 QML 中, model (模型)与 view (视图)都通过 delegate (代理)连接起
来。功能划分如下, model (模型)提供数据。对于每个数据项,可能有多
个值。在上⾯的电话薄例⼦中,每个电话薄条目对应⼀个名字,⼀个图⽚和
⼀个号码。显⽰在 view (视图)中的每项数据 , 都是通过 delegate (代理)来
实现可视化。
使用模型的简单示例:
在下⾯的例⼦中,⼀ 个repeater 元素创建了 10 个⼦项,⼦项的数量由 model 属性控制。
使用一个数组来替换 整形变量 model 的值 可以达到我们的目的。model 对应的值可以是任何类型的数据, 可以是字符串数组,整数,或者对象数组等。 使用字符串数组来进行测试:
效果图:
model 的数据:
矩形框展示内容:
经测试 直接赋值为字符串 好像不好使:model: "basemodelTest"
ListModel (链表模型) 。 一个链表模型由 几个 ListElement(链表元素)组成, 每个 链表元素中,可以绑定到属性上。例: 每个链表元素都是一个对象,可将对象的属性绑定到 ModelItem 中。
Repeater 的内容的每个 子项实例化时绑定了默认的属性delegate(代理),黙认绑定时隐藏 delegate, 意味 着上面用例 Repeater 的子项部分也可以这样写:
delegate:Rectangle{width: 100height: 20radius: 3color: "lightBlue"Text {anchors.centerIn: parentid: nameTXT//modelData中包含的每个元素的数据// text: index + ": "+ modelData// ListModel(链表模型)text://每个元素中的属性绑定连接到repeater实例化的⼦项上。这意味着变量name//和surfaceColor可以被repeater创建的每个Rectangle和Text项引⽤text: name}Rectangle{anchors.left: parent.leftanchors.verticalCenter: parent.verticalCenteranchors.leftMargin: 2width: 16height: 16radius: 8border.color: "black"border.width: 1color: surfaceColor}
}
注意:唯一不同的是delegate属性名。
附部源码:
import QtQuick 2.15Item {Column{spacing: 2//Repeater元素适合有限的静态数据Repeater{//model: 10//⼦项的数量由model属性//model: ["Enterprise", "Colombia", "Challenger", "Discovery", "Endeavour", "Atlantis"]// model: "basemodelTest"//ListModel(链表模型)。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" }}// Rectangle {// width: 100// height: 20// radius: 3// color: "lightBlue"// Text {// anchors.centerIn: parent// text: index// }delegate:Rectangle{width: 100height: 20radius: 3color: "lightBlue"Text {anchors.centerIn: parentid: nameTXT//modelData中包含的每个元素的数据// text: index + ": "+ modelData// ListModel(链表模型)text://每个元素中的属性绑定连接到repeater实例化的⼦项上。这意味着变量name//和surfaceColor可以被repeater创建的每个Rectangle和Text项引⽤text: name}Rectangle{anchors.left: parent.leftanchors.verticalCenter: parent.verticalCenteranchors.leftMargin: 2width: 16height: 16radius: 8border.color: "black"border.width: 1color: surfaceColor}}}}}